Handling JSON responses and error handling
JavaScript programmers working with APIs have to manage and control JSON data information in many web responses by applying the fetch() function method in JavaScript programming. Apart from this, error management in proper format is very important for a better web internet user experience and debugging problems in an effective order. So now here we will learn more about many ways to manage JavaScript JSON responses and apply strong error management.
Handling JSON responses in JavaScript.
When an API in a webpage returns data in a JSON format response, programmers parse the response body into a JavaScript webpage object by applying the .json() function method on the response object.
Example of controlling JSON response in JavaScript.
fetch(‘https://jsonplaceholder.typicode.com/users’)
.then(response => {
// here it Check if the response is successful or not check status 200-299
if (!response.ok) {
throw new Error(‘system response is not ok’);
}
return response.json(); // here it Parse the response as JSON object
})
.then(data => {
console.log(‘let Fetched data’, data); // here it Handle the parsed JSON data object
})
.catch(error => {
console.error(‘here is a problem with the fetch json data operation’, error); //use this to handle any json errors
});
Explanation of Handling JSON responses.
Here the response.json() method returns a promise value, which is resolved to a JSON object. If the response here is a valid JSON object, it is automatically parsed by the system, and will be available in the next .then() block.
Here response.ok: The response.ok property checks if the HTTP status code is in the range of 200-299, which indicates a json success response.
Error handling in fetch() method in JavaScript.
The fetch() method in JavaScript webpage rejects the promise only when there is a network failure or a system problem that prevents the web request from completing, such as the internet is not available. The method does not reject on HTTP error status codes like 404 or 500. To deal with such system network errors, the programmer must manually check the system responses condition status.
Basic error handling example in JavaScript.
fetch(‘https://jsonplaceholder.typicode.com/users’)
.then(response => {
// here it Check if the json response was successful check status 200-299 range
if (!response.ok) {
// here If the json response is not successful, then it throw an system error
throw new Error(`Display system HTTP error, ${response.status}`);
}
return response.json(); //here it Parse JSON if operation is successful
})
.then(data => {
console.log(‘Json system Data’, data); //here it Handle the json data
})
.catch(error => {
console.error(‘Display system Error’, error); // here it Catch and log any system errors
});
Explanation of basic error handling.
Here this json response.ok contains a boolean response that indicates to the user whether the status of the system response is in the range 200-299 or not. If not in the range, programmers can manually throw an error message with the throw new Error() method.
Here the .catch(error) function catches any system errors that occur during the fetch process or while processing the json responses, including system network issues, invalid JSON parsing, or displaying a custom error generated by testing the response status.
Managing 404, 500, or other HTTP errors in JavaScript.
To handle multiple system HTTP request status codes such as 404 (Not Found) or 500 (Internal Server Error) in a JavaScript webpage, programmers can examine the response.status status response code and act on the status code. If the network system response is not successful, i.e., the status code is not in the 200-299 range, programmers can throw an error message or handle it in the proper order.
Example of 404 and 500 error handling in JavaScript.
fetch(‘https://jsonplaceholder.typicode.com/users’)
.then(response => {
if (response.status === 404) {
throw new Error(‘web Page not found 404 code error’);
} else if (response.status === 500) {
throw new Error(‘display internal Server error 500 status code’);
} else if (!response.ok) {
throw new Error(‘system network response is not ok’);
}
return response.json();
})
.then(data => {
console.log(‘it Fetched system data’, data); // here it use to Handle successful system response status code
})
.catch(error => {
console.error(‘There was an system error’, error); // here it use to Catch specific or generic system response status code errors
});
Managing 404, 500, or other HTTP errors explained.
In this status response code, the server provides a response with 404 or 500, displaying an error message specific to these status codes.
Here if the system response is something else, e.g., 403, 400, then the programmer displays a general error message using the response.ok method.
Managing errors with async/await in JavaScript.
JavaScript programmers can also use the async/await method for more detailed program syntax and easier error management. While it works like the .then() and .catch() functions, remember, it is used in a more synchronous style, making the program code easier and more readable.
Example of getting data and error management with async/await in JavaScript.
try {
const response = await fetch(‘https://jsonplaceholder.typicode.com/users’);
// here it Check if the system status code response was successful or not
if (!response.ok) {
throw new Error(`display HTTP system error Status ${response.status}`);
}
const data = await response.json(); //here it Parse the response as JSON
console.log(‘it Fetched system data’, data); //here it Handle the fetched data
} catch (error) {
console.error(‘display system error’, error); // here it Catch and handle all errors network, JSON, etc in process
}
}
fetchUserData(); // here it Call the async function to fetch system or json data
Explanation of data and error management with async/await.
Here await function is used to wait for the promise to be completed from fetch() and .json() method.
Whereas try…catch block is used to manage the system error code status in the webpage. Here any system error occurring inside the try block like network problem, response error, etc. is caught in the catch block.
Managing invalid JSON or other non-JSON responses in JavaScript.
Sometimes the server may return a response in the system response that is not in JSON format, even though the user waited for this to happen. To manage this, programmers can test the Content-Type header before trying to parse the JSON.
Example of non-JSON responses in JavaScript.
fetch(‘https://jsonplaceholder.typicode.com/users’)
.then(response => {
if (!response.ok) {
throw new Error(‘system network response is not ok’);
}
// here it Check if the response is JSON ok
const contentType = response.headers.get(‘Content-Type’);
if (contentType && contentType.includes(‘application/json’)) {
return response.json(); // here it Parse JSON if content type is application/json format
} else {
throw new Error(‘display Expected JSON application response’);
}
})
.then(data => {
console.log(‘now it Fetched network system data’, data); // here it is used to Handle JSON data object
})
.catch(error => {
console.error(‘it displays system Error’, error); //here it Handle any system network errors
});
invalid JSON or other non-JSON responses Explanation.
Here we can test the Content-Type header of the response by using the response.headers.get(‘Content-Type’) method.
If the system response is not in JSON application/json format, then an error is generated.
This helps to manage cases where the server may return an unexpected format, such as simple text values, in HTML format.
Managing timeout errors in JavaScript.
In a particular case, the system network request response may take too much time, and programmers may want to apply a timeout function to their fetch() function requests. However, since the fetch() function itself does not support a direct timeout option, programmers can use the setTimeout method to manage the timeout manually.
Example of adding timeout to Fetch in JavaScript.
function fetchWithTimeout(url, timeout = 3000) {
const timeoutPromise = new Promise((_, reject) =>
setTimeout(() => reject(new Error(‘system Request timed out’)), timeout)
);
const fetchPromise = fetch(url);
return Promise.race([fetchPromise, timeoutPromise]);
}
fetchWithTimeout(‘https://jsonplaceholder.typicode.com/users’)
.then(response => {
if (!response.ok) {
throw new Error(‘system network response is not ok’);
}
return response.json();
})
.then(data => console.log(‘it Fetched system data’, data))
.catch(error => console.error(‘display system Error:’, error));
Explanation of managing timeout errors.
Here in this program fetchWithTimeout creates two promises.
Where one is a fetch request.
The second one is a timeout promise which is rejected after a particular time frame.
Here Promise.race([fetchPromise, timeoutPromise]) returns the result of the promise which is already resolved. If the fetch process is taking too much time then timeout method will reject the promise, finally catch block method will manage the program error.
Summary of handling JSON responses and errors in JavaScript.
- Handle JSON responses – Use the response.json() method to parse the response body as JSON in a JavaScript webpage.
- Error handling – Use the response.ok method to test system response success and manually log errors for invalid HTTP status codes.
- Error catching – Use the .catch() method for system responses promise rejections or use a try…catch block with async/await processing for more detailed syntax.
- Non-JSON responses – Test the Content-Type header before attempting to parse the JSON in the webpage.
- Timeout management – Implement a custom timeout method with Promise.race to cancel a long-running webpage request in the system.
