Your Axios HTTP request may fail due to various reasons. Keep reading to learn how to get the status code of an Axios HTTP error in JavaScript.

Get The Status Code Of An Axios HTTP Error In JavaScript

When your HTTP request fails, Axios will return an object containing information about the error. There are two ways to catch this error object in JavaScript.

You can use the .catch() method of Axios:

const axios = require('axios');

const badURL = 'https://example.com/ittutoria.net';

axios.get(badURL)

  .catch(function (error) {

      console.error(error);

});

Or you can use the try-catch statement of JavaScript itself:

const axios = require('axios');

const badURL = 'https://example.com/ittutoria.net';

async function badRequest() {

    try {

        const res = await axios.get(badURL);  

        return res.data;

        console.log(data);

    } catch (error) {

        console.error(error);

    }

}

In the above example, we make a GET request that points to an unavailable URL on the server. This guarantees a 404 error. We can use the console.error() method of JavaScript to print this error message into the console.

If you actually look at the output, there is a lot of information, most of which is irrelevant. Finding the status code in this mess is an exhausting task.

However, you can narrow down the type of error objects to find it easier. Not every request error object returned by Axios has the same properties. The way these objects are constructed depends on how your HTML fails.

For instance, if Axios can’t fulfill the request because there is something wrong with the way it is set up, the error object has only a message property.

If the server somehow doesn’t respond to your request, the error object is called error.request. In browsers, it is an instance of the XMLHttpRequest class. In Node.js, this property is an instance of http.ClientRequest.

If you need an error status code, it means the server did receive your request, but instead of a normal page, it returns an error message. Axios will create an object called error.response to indicate this type of error.

We can use an if statement to check for this object:

if (error.response) {}

This object has many properties that store various pieces of information of the error: error.response.data, error.response.status, error.response.headers.

Here is the complete code of using the .catch() method to catch and print the status code:

const axios = require('axios');

const badURL = 'https://example.com/ittutoria.net';

axios.get(badURL)

  .catch(function (error) {

    if (error.response) {

        console.log('Error code:', error.response.status);        

    }

});

This is how you can show the status code with a try-catch statement:

const axios = require('axios');

const badURL = 'https://example.com/ittutoria.net';

async function badRequest() {

    try {

        const res = await axios.get(badURL);  

        return res.data;

        console.log(data);

    } catch (error) {

    if (error.response) {

        console.log('Error code:', error.response.status);        

    }

    }

}

badRequest();

Both of them results in the same output:

Error code: 404

Remember that the error.response.status property is a number. It is 404 here, meaning the server couldn’t fulfill the request due to a mistake in the client. In our case, it happens because of the wrong URL we provide. But 404 may also indicate that your request uses malformed syntax or invalid message framing.

Summary

You can get the status code of an Axios HTTP error in JavaScript by catching the error.response object, whose status property contains the status code of the error. Additionally, follow this guide if you want to send a POST request with Axios.