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

201

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'}
javascript axios Sebastian Olsen
fonte

Respostas:

362

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);
    }
  });
Nick Uraltsev
fonte
9
Você pode explicar a mágica por trás dele se transformando automaticamente em uma string, se eu não me referir à responsepropriedade?
Sebastian Olsen
7
console.logusa o toStringmétodo para formatar Errorobjetos. Não tem nada a ver com referência à responsepropriedade.
precisa saber é o seguinte
2
Ainda estou confuso, isso é específico para objetos de erro ou? Se eu console.log um objeto, recebo o objeto, não uma string.
Sebastian Olsen
3
Depende da implementação. Por exemplo, a implementação do node.js console.log manipula Error objetos como um caso especial. Não sei dizer exatamente como ele foi implementado nos navegadores, mas se você ligar console.log({ foo: 'bar' });e console.log(new Error('foo'));no Chrome DevTools Console, verá que os resultados parecem diferentes.
Nick Uraltsev
5
Deve ser uma coisa nativa então. Ainda é estranho.
Sebastian Olsen
17

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))
  });
danii
fonte
8

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 });
});
bronzeado
fonte
6

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)
  })
Yan QiDong
fonte
2

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.

Moses Schwartz
fonte
1

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.

Dmitriy Nevzorov
fonte
1
Este não é o mesmo problema que estou tendo, não há sequer um objeto envolvido quando eu entroerror
Sebastian Olsen
1

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})
Dmytro Naumenko
fonte
0

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.

Mendy
fonte
0

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

Emre Tapcı
fonte