Axios получить статус ошибки

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

Using the validateStatus config option, you can define HTTP code(s) that should throw an error.

axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // Resolve only if the status code is less than 500
  }
})

Using toJSON you get an object with more information about the HTTP error.

axios.get('/user/12345')
  .catch(function (error) {
    console.log(error.toJSON());
  });

You can have two different ways of achieving the goal, by using the .then() and catch() method or using the async() and await() function. Let’s learn how to get the status code of an Axios HTTP Error in JavaScript.

Handling Errors With Axios

Axios is a Javascript framework that makes use of the Promise API to build HTTP requests using either XMLHttpRequests in the browser or HTTP in the Node.js runtime. These requests can use the more recent async/await syntax; the .then() utilities for promise chaining; and the .catch() mechanism for error management because they are promises.

import axios from 'axios';
try {
    let res = await axios.get('/my-api-route');

    // Work with the response...
} catch (err) {
    // Handle error
    console.log(err);
}

When performing any HTTP requests, it’s crucial to understand how to handle problems with Axios. Because there are instances when the resource you’re accessing may not be available or may return other unexpected issues. Although we’ll demonstrate the .then()/.catch() technique, async/await is the most common syntax.

Then and Catch

The async/await syntax, which we introduced above, as well as the .then() and .catch() function, are two ways that can handle promises in the current JS (). You should note that while both of these methods are capable of producing the same functionality. async/await is advantageous method because it needs less boilerplate code and can handle longer promise chains.

To accomplish the same goal using the then/catch technique, follow these steps:

import axios from 'axios';
axios.get('/my-api-route')
    .then(res => {
        // Work with the response...
    }).catch(err => {
        // Handle error
        console.log(err);
    });

Similar to the async/await syntax, the err and res are both present.

To obtain the status code from an HTTP error response, just use the status field on the error.response instance, for example, error.response.status. The status code supplied by the server in reaction to the client’s request is returned by the error.response object’s status attribute. We’ll present the .then()/.catch() technique, and also the method using await/async.

Method 1: Using .then()/.catch() function

To get the status code of the error, we caught the error in a catch block and accessed the status property on the error.response object.

Below is an illustration of how to get the status code of an Axios HTTP Error using promise.then() and promise.catch() instead of async/await.

import axios from 'axios';
axios.get('/not/exist').then((response) => {
    console.log('Working well.');
}).catch((error) => {
    if (err.response)
        console.log(err.response.status);
})

An error code 404 is expected to be returned when we sought a route that didn’t exist.

Syntax:

promise.then(success).catch(error);

Parameter:

• success: success() function would be called on fulfillment
• error: error() function would be called if there is a failure

Output:

404

Method 2: Using async keyword

This is how to accomplish the same goal by incorporating the async/await technique within try/catch statement:

Syntax:

async function functionname(param0) {
//  your codes
}

Parameter:

• functionname: The name of the function.
• param0: The parameter’s name you want to pass to the function.

For instance, you can use the following code to get the status code of an Axios HTTP Error:

async function functioname() {
  try {
  await axios.get('/not/exist');
    console.log("Working well");
  } catch (err) {
    if (err.response) {
      let statuscode = err.response.status;
      console.log(statuscode);
}
   }
}

Output:

404

Summary

We have explained how to handle errors and problems with Axios in this post and how to get the status code of an Axios HTTP error in JavaScript. This is crucial in order to avoid always delivering a general error message, giving 404 errors, or suggesting network issues to users of your application or website.

Maybe you are interested:

• How to access the Value of a Promise in JavaScript
• Get the Stack Trace from an Error in JavaScript
• Get the filename without the path using JavaScript

If you have been searching the web for some information about AXIOS error messages, and would like to understand how to use them, then you have come to the right place.

TLTR; Find the code snippets in the following section

If you search the web on this topic, all you can find is:

• catching error body using axios post
• Unable to catch the body of error
• JS Axios – how to get response body in event of error?
• How to see axios error response JSON in React

The list could have gone on and on, but they all ask for the sample simple question:

How can someone get the actual error information coming from a bad request made with AXIOS.

In this post we are going to provide information on “why” so many people ask for information, and “how” this information can be found.

Why so many people ask for this

If you have ever worked with an api, you perfectly know that request not always go to plan. You hope to always get a lovely response with a status of 200, but this does not always happens.

In many instances the status of our request may return some kind of error (400, 500), and when this happens we would like to be able to have a readable error message.

axios.get('EndpointWithAuthorizedError')
    .then((response) => {})
    .catch((error) => {
        console.log(error);
    })

Unfortunately if the above would ever fail with a meaningful error, we would still see this within our console, as the variable passed by the catch statement seem to be of type “string”.

Error: Request failed with status code 401

This is actually the main reason why so many people are “forced” to ask for help.

How can we process AXIOS error message

There is actually no magic when processing the error messages. In fact, the catch is in the fact that the variable received by the catch statement seem to be a string, but in reality it is not.

The AXIOS error message can actually return 3 different structure, depending from what kind of failure it has (crazy right… I thought that too).

Error in setting up the request

This error can happen if we have made an actual mistake in setting up the AXIOS request. It could be something with the data passed, or a configuration setting.

When this happen we can actually find the information we need by accessing the message parameter of the catch.

axios.get('wrongSetup')
    .then((response) => {})
    .catch((error) => {
        console.log(error.message);
    })

//or using destructuring
axios.get('wrongSetup')
    .then((response) => {})
    .catch(({message) => {
        console.log(message);
    })

No response – Network Error

This scenario will take place when our request had no response at all. This can happen when the URL is incorrect, or if the receiving server is down.

When this happen we can access more information about our request bu accessing the request parameter. This will return the actual “request” information.

axios.get('network error')
     .then((response) => {})
     .catch((error) => {
         console.log(error. request );
     })
//or using destructuring
 axios.get('network error')
     .then((response) => {})
     .catch(({ request ) => {
         console.log( request );
     })

Request returned with an error status

This is one of the most common, or more specifically the one type of “error” that need to be manage to make sure our web applications function properly.

There are hundreds of status code differently than 200 (https://developer.mozilla.org/en-US/docs/Web/HTTP/Status), that would fit in this category. I am going to list below the most important:

• 400: Bad request
• 401: Unauthorized
• 403: Forbidden
• 404: Not Found
• 500: Internal Server error
• 502: Bad Gateway

When any of the above happen, we would like to know more about the request. In this case there are more information provided to us: data, status, header.

axios.get('errorStatus')
     .then((response) => {})
     .catch((error) => { 
         console.log(error.response.data);  
         console.log(error.response.status);  
         console.log(error.response.headers); 
     })

//or using destructuring
 axios.get('errorStatus')
     .then((response) => {})
     .catch(({ response }) => { 
         console.log(response.data);  
         console.log(response.status);  
         console.log(response.headers);  
     })

With the above code, we will be able to get all the information we need about the response to our request. These includes the status code, the header and last but not least the data that the server has sent with the request.

When using any kind of API, the data parameter is going to include essential information, usually used for development purposes, but at times also good to show to the end users.

I hope to have saved you some time, and please feel free to comment, or provide suggestion to improve this post and help future readers