Como posso obter o código de status de um erro http no Axios?

Isso pode parecer estúpido, mas estou tentando obter os dados de erro quando uma solicitação falha no Axios.

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

Em vez da string, é possível obter um objeto com talvez o código e o conteúdo do status? Por exemplo:

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

O que você vê é a sequência retornada pelo toStringmétodo do errorobjeto. ( errornão é uma string.)

Se uma resposta foi recebida do servidor, o errorobjeto conterá a responsepropriedade:

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

Como o @Nick disse, os resultados que você vê quando console.logum Errorobjeto JavaScript depende da implementação exata de console.log, o que varia e (imo) torna a verificação de erros incrivelmente irritante.

Se você deseja ver o Errorobjeto completo e todas as informações que ele contorna ignorando o toString()método, basta usar JSON.stringify :

axios.get('/foo')
  .catch(function (error) {
    console.log(JSON.stringify(error))
  });

Estou usando esses interceptores para obter a resposta do erro.

const HttpClient = axios.create({
  baseURL: env.baseUrl,
});

HttpClient.interceptors.response.use((response) => {
  return response;
}, (error) => {
  return Promise.resolve({ error });
});

Com o TypeScript, é fácil encontrar o que você deseja com o tipo certo.

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)
  })

Você pode usar o operador spread ( ...) para forçá-lo a um novo objeto como este:

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

Esteja ciente: isso não será uma instância do Erro.

Este é um erro conhecido, tente usar "axios": "0.13.1"

https://github.com/mzabriskie/axios/issues/378

Eu tive o mesmo problema, então acabei usando "axios": "0.12.0". Isso funciona bem para mim.

Há uma nova opção chamada validateStatusna configuração de solicitação. Você pode usá-lo para especificar para não lançar exceções se status <100 ou status> 300 (comportamento padrão). Exemplo:

const {status} = axios.get('foo.com', {validateStatus: () => true})

Você pode colocar o erro em um objeto e registrá-lo da seguinte maneira:

axios.get('foo.com')
    .then((response) => {})
    .catch((error) => {
        console.log({error}) // this will log an empty object with an error property
    });

Espero que isso ajude alguém lá fora.

Para obter o código de status http retornado do servidor, você pode adicionar validateStatus: status => trueàs opções dos axios:

axios({
    method: 'POST',
    url: 'http://localhost:3001/users/login',
    data: { username, password },
    validateStatus: () => true
}).then(res => {
    console.log(res.status);
});

Dessa forma, toda resposta http resolve a promessa retornada dos axios.

https://github.com/axios/axios#handling-errors