curriculum/challenges/english/blocks/review-asynchronous-javascript/6723d35bb07d1bd220d0f28d.md
fetch() method that you can use to make these requests.The Fetch API supports various HTTP methods to interact with the server. The most common methods are:
GET method to retrieve data.fetch('https://api.example.com/data')
To use the fetched data, it must be converted to JSON format using the .json() method:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
In this code, the response coming from the Fetch API is a promise and the .then handler is converting the response to a JSON format.
POST method is used to create new resources on the server.fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'John Doe',
email: '[email protected]'
})
})
In this example, we're sending a POST request to create a new user. We have specified the method as POST, set the appropriate headers, and included a body with the data we want to send. The body needs to be a string, so we use JSON.stringify() to convert our object to a JSON string.
PUT method is used to update existing resources on the server.fetch('https://api.example.com/users/45', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'John Smith',
email: '[email protected]'
})
})
In this example, we are updating the ID 45 that is specified at the end of the URL. We have used the PUT method on the code and also specified the data as the body which will be used to update the identified data.
DELETE method is used to delete resources on the server.fetch('https://api.example.com/users/45', {
method: 'DELETE'
})
In this example, we're sending a DELETE request to remove a user with the ID 45.
async operation is completed.const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data received successfully');
}, 2000);
});
.then() method is used in a Promise to specify what should happen when the Promise is fulfilled, while .catch() is used to handle any errors that occur..then() and .catch() with a Promise:promise
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
In the above example, the .then() method is used to log the data received from the Promise, while the .catch() method is used to log any errors that occur.
.then() can return a new Promise, allowing you to perform a sequence of asynchronous operations one after the other.fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
return fetch('https://api.example.com/other-data');
})
.then(response => response.json())
.then(otherData => {
console.log(otherData);
})
.catch(error => {
console.error(error);
});
In the above example, we first fetch data from one URL, then fetch data from another URL based on the first response, and finally log the second data received.
The catch method would handle any errors that occur during the process. This means you don't need to add error handling to each step, which can greatly simplify your code.
async/await to handle promisesAsync/await makes writing & reading asynchronous code easier which is built on top of Promises.
async keyword is used to define an asynchronous function. An async function returns a Promise, which resolves with the value returned by the async function.await keyword is used inside an async function to pause the execution of the function until the Promise is resolved. It can only be used inside an async function.async/await:async function delayedGreeting(name) {
console.log("A Messenger entered the chat...");
await new Promise(resolve => setTimeout(resolve, 2000));
console.log(`Hello, ${name}!`);
}
delayedGreeting("Alice");
console.log("First Printed Message!");
In the above example, the delayedGreeting function is an async function that pauses for 2 seconds before printing the greeting message. The await keyword is used to pause the function execution until the Promise is resolved.
async/await is error handling via try/catch blocks. Here's an example:async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();
In the above example, the try block contains the code that might throw an error, and the catch block handles the error if it occurs. This makes error handling more straightforward and readable.
async attributeasync attribute tells the browser to download the script file asynchronously while continuing to parse the HTML document.async for independent scripts where the order of execution doesn't matterdefer attributeThe defer attribute also downloads the script asynchronously, but it defers the execution of the script until after the HTML document has been fully parsed.
The defer scripts maintain the order of execution as they appear in the HTML document.
It's important to note that both async and defer attributes are ignored for inline scripts and only work for external script files.
When both async and defer attributes are present, the async attribute takes precedence.
The Geolocation API provides a way for websites to request the user's location.
The example below demonstrates the API's getCurrentPosition() method which is used to get the user's current location.
navigator.geolocation.getCurrentPosition(
(position) => {
console.log("Latitude: " + position.coords.latitude);
console.log("Longitude: " + position.coords.longitude);
},
(error) => {
console.log("Error: " + error.message);
}
);
In this code, we're calling getCurrentPosition and passing it a function which will be called when the position is successfully obtained.
The position object contains a variety of information, but here we have selected latitude and longitude only.
If there is an issue with getting the position, then the error will be logged to the console.
Review the Asynchronous JavaScript topics and concepts.