How can I get the status code from an HTTP error in Axios?

Question

This may seem stupid, but I'm trying to get the error data when a request fails in Axios.

axios   .get('foo.com')   .then((response) => {})   .catch((error) => {     console.log(error); //Logs a string: Error: Request failed with status code 404   }); 

Instead of the string, is it possible to get an object with perhaps the status code and content? For example:

Object = {status: 404, reason: 'Not found', body: '404 Not found'} 

Answer 1

What you see is the string returned by the toString method of the error object. (error is not a string.)

If a response has been received from the server, the error object will contain the response property:

axios.get('/foo')   .catch(function (error) {     if (error.response) {       console.log(error.response.data);       console.log(error.response.status);       console.log(error.response.headers);     }   }); 

Answer 2

With TypeScript, it is easy to find what you want with the right type.

This makes everything easier because you can get all the properties of the type with autocomplete, so you can know the proper structure of your response and error.

import { AxiosResponse, AxiosError } from 'axios'  axios.get('foo.com')   .then((response: AxiosResponse) => {     // Handle response   })   .catch((reason: AxiosError) => {     if (reason.response!.status === 400) {       // Handle 400     } else {       // Handle else     }     console.log(reason.message)   }) 

Also, you can pass a parameter to both types to tell what are you expecting inside response.data like so:

import { AxiosResponse, AxiosError } from 'axios' axios.get('foo.com')   .then((response: AxiosResponse<{user:{name:string}}>) => {     // Handle response   })   .catch((reason: AxiosError<{additionalInfo:string}>) => {     if (reason.response!.status === 400) {       // Handle 400     } else {       // Handle else     }     console.log(reason.message)   })