Axios Error Response Handling: Accessing Data on HTTP Errors

Introduction

In JavaScript development, handling API request responses and errors is a common task. With HTTP clients like Axios, when a request fails (e.g., returning a 404 status code), it throws an error, but not all response information is lost. This article will detail how to use the error.response property within a try-catch-finally structure to retrieve serialized response data.

Error Handling Mechanism in Axios

According to the official documentation, when an HTTP status code is not in the 2xx range, Axios throws an error object that contains a response property. This property holds the response data, status code, and headers. By accessing err.response.data, err.response.status, and err.response.headers, you can obtain the full response content. This mechanism allows handling useful information from the server during unsuccessful requests.

Code Examples and Handling

In a standard try-catch-finally structure, to access the response in the finally block, you need to assign the response to a variable like apiRes. For example, assign in the catch block:

(async() => {
  let apiRes = null;
  try {
    apiRes = await axios.get('https://silex.edgeprop.my/api/v1/a');
  } catch (err) {
    apiRes = err.response; // Save error response to variable
  } finally {
    console.log(apiRes); // Use in finally, could be success or error response
  }
})();

This way, you can handle both success and failure cases in the finally block. If only processing in the catch block, directly access err.response:

(async() => {
  try {
    const response = await axios.get('https://silex.edgeprop.my/api/v1/a');
    console.log('Success:', response.data);
  } catch (err) {
    console.error('Error response:', err.response.data);
    console.error('Status:', err.response.status);
    console.error('Headers:', err.response.headers);
  }
})();

Configuration Options and Supplements

Beyond default handling, you can change Axios's status validation behavior by setting the validateStatus configuration. For instance, setting validateStatus: false disables all status code validation, and the request will always return a response object without throwing an error. Example:

axios.get('https://silex.edgeprop.my/api/v1/a', { validateStatus: false });

This approach can avoid try-catch structures but requires manual status checking and is not mainstream recommended. For details, refer to the official documentation.

Conclusion

In practical development, the best way to access Axios error responses is to use err.response directly in the catch block or assign it to a variable for use in finally. By understanding this mechanism, developers can better handle API responses, improving code stability and maintainability.