Keywords: Fetch API | Promise Error Handling | HTTP Status Codes
Abstract: This article provides an in-depth exploration of JavaScript Fetch API error handling mechanisms, focusing on how to properly reject promises and catch errors when HTTP response status codes are 4xx or 5xx. By comparing the different handling approaches for network errors versus HTTP errors, it thoroughly analyzes the usage scenarios of the Response.ok property and offers complete code examples demonstrating robust error handling integration with Redux and promise middleware. The article also references real-world best practices, showing how to extract more meaningful error information from error responses, providing frontend developers with comprehensive Fetch API error handling solutions.
Overview of Fetch API Error Handling Mechanisms
The JavaScript Fetch API is a commonly used HTTP request tool in modern web development, but its error handling mechanism differs significantly from traditional XMLHttpRequest. Understanding these differences is crucial for building stable frontend applications.
Difference Between Network Errors and HTTP Status Errors
Fetch API promises are automatically rejected only when network-level errors occur, such as DNS resolution failures, connection timeouts, or CORS policy blocking. For HTTP responses with 4xx (client errors) and 5xx (server errors) status codes, Fetch treats them as successful requests because, from a network communication perspective, the request successfully reached the server and received a response.
Key Role of the Response.ok Property
The ok property of the Response object is the core indicator for determining request success. When the status code is in the 200-299 range, ok returns true; for other status codes, it returns false. This provides us with a standardized method to manually check HTTP response status.
Error Handling Pattern for Promise Rejection
Based on best practices, we can construct the following error handling pattern:
fetch(url)
.then((response) => {
if (response.ok) {
return response.json();
}
throw new Error('HTTP error, status: ' + response.status);
})
.then((responseJson) => {
// Process successful response data
console.log(responseJson);
})
.catch((error) => {
// Unified error handling
console.error('Request failed: ', error);
});Implementation with Redux and Promise Middleware
When integrating with Redux applications using redux-promise-middleware, it's essential to ensure errors properly propagate to the action handling flow:
function fetchVehicle(id) {
return dispatch => {
return dispatch({
type: 'FETCH_VEHICLE',
payload: fetch(`http://swapi.co/api/vehicles/${id}/`)
.then(response => {
if (!response.ok) {
throw new Error(`Request failed with status: ${response.status}`);
}
return response.json();
})
});
};
}Enhanced Error Message Extraction
Referencing practical development experience, many APIs include more detailed error information in the body of error responses. We can extract this information using the following approach:
fetch("/api/endpoint")
.then(response => {
if (!response.ok) {
throw response;
}
return response.json();
})
.then(json => {
// Process successful data
dispatch(successAction(json));
})
.catch(err => {
if (err.text) {
err.text().then(errorMessage => {
dispatch(errorAction(errorMessage));
});
} else {
dispatch(errorAction(err.message));
}
});Best Practices Summary for Error Handling
In actual projects, it's recommended to adopt a unified error handling strategy: clearly distinguish between network errors and business logic errors, provide meaningful error information, and ensure errors properly propagate to the application's state management system. Through proper error handling, application stability and user experience can be significantly improved.