Related Topics
Node JS
React JS
AJAX
// Make an AJAX request using the fetch API
fetch('/api/data')
.then(response => {
// Check if the response is OK
if (!response.ok) {
// If the response is not OK, throw an error
throw new Error('Network response was not OK');
}
// If the response is OK, parse the JSON data
return response.json();
})
.then(data => {
// Handle the data in the success case
console.log('Received data:', data);
})
.catch(error => {
// Handle errors in the error case
console.error('Error:', error);
});
In this example, we use the fetch API to make an AJAX request to the server. The fetch() function returns a Promise that resolves to the Response object representing the server’s response. We chain two then() methods to the Promise to handle the success and error cases.
In the first then() method, we check if the response is OK by checking the ok property of the Response object. If the response is not OK, we throw an error, which will cause the Promise to reject and jump to the catch() method. If the response is OK, we call the json() method of the Response object to parse the JSON data in the response body. This returns a Promise that resolves to the parsed JSON data.
In the second then() method, we handle the parsed JSON data in the success case. In this example, we simply log the data to the console, but you could use the data to update the content of the web page or perform other actions.
In the catch() method, we handle errors in the error case. This could be caused by a network error, a server error, or any other type of error. In this example, we simply log the error to the console, but you could display an error message to the user or perform other error-handling actions.
// Make an AJAX request using the fetch API
fetch('/api/data')
.then(response => {
// Check if the response is OK
if (!response.ok) {
throw new Error('Network response was not OK');
}
// If the response is OK, parse the JSON data
return response.json();
})
.then(data => {
// Handle the data in the success case
console.log('Received data:', data);
// Parse the data as needed
const parsedData = JSON.parse(data);
console.log('Parsed data:', parsedData);
})
.catch(error => {
// Handle errors in the error case
console.error('Error:', error);
});
In this example, we use the fetch API to make an AJAX request to the server. We chain two then() methods to the Promise to handle the success and error cases.
In the first then() method, we check if the response is OK by checking the ok property of the Response object. If the response is not OK, we throw an error, which will cause the Promise to reject and jump to the catch() method. If the response is OK, we call the json() method of the Response object to parse the JSON data in the response body. This returns a Promise that resolves to the parsed JSON data.
In the second then() method, we handle the parsed JSON data in the success case. We first log the data to the console, and then parse it using JSON.parse(). This converts the JSON string into a JavaScript object that can be manipulated in code.
Note that the JSON.parse() method will throw an error if the input string is not valid JSON. It’s a good practice to always wrap this method in a try-catch block to handle any parsing errors that may occur.
function fetchData() {
return fetch('/api/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not OK');
}
return response.json();
})
.then(data => {
console.log('Received data:', data);
return data;
})
.catch(error => {
console.error('Error:', error);
throw error;
});
}
fetchData()
.then(data => {
// Handle data in the success case
console.log('Processed data:', data);
})
.catch(error => {
// Handle errors in the error case
console.error('Error:', error);
});
In this example, we define a function fetchData() that makes an AJAX request to the server using the fetch API. The function returns a Promise that resolves to the parsed JSON data from the response body.
We then call the fetchData() function and chain two then() methods to the Promise to handle the success and error cases. In the success case, we log the processed data to the console. In the error case, we log the error to the console and re-throw the error to propagate it to any subsequent catch() methods.
By using Promises to handle the response data and errors in a structured way, we can write more maintainable and reliable code that is easier to understand and debug.
Popular Category
Topics for You
Node JS
React JS
Go through our study material. Your Job is awaiting.