¿Cómo puedo obtener el código de estado de un error http en Axios?


201

Esto puede parecer estúpido, pero estoy tratando de obtener los datos de error cuando falla una solicitud en Axios.

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

En lugar de la cadena, ¿es posible obtener un objeto con quizás el código de estado y el contenido? Por ejemplo:

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

Respuestas:


363

Lo que ves es la cadena devuelta por el toStringmétodo del errorobjeto. ( errorno es una cadena)

Si se ha recibido una respuesta del servidor, el errorobjeto contendrá la responsepropiedad:

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

9
¿Puedes explicar la magia detrás de él convirtiéndose automáticamente en una cadena si no me refiero a la responsepropiedad?
Sebastian Olsen

77
console.logutiliza el toStringmétodo para formatear Errorobjetos. No tiene nada que ver con referirse a la responsepropiedad.
Nick Uraltsev

2
Todavía estoy confundido, ¿esto es específico para objetos de error o? Si console.log un objeto, obtengo el objeto, no una cadena.
Sebastian Olsen

3
Depende de la implementación. Por ejemplo, la implementación de node.js de console.log maneja Error objetos como un caso especial. No puedo decir cómo se implementa exactamente en los navegadores, pero si llama console.log({ foo: 'bar' });y console.log(new Error('foo'));en la Consola de Chrome DevTools, verá que los resultados se ven diferentes.
Nick Uraltsev

55
Debe ser una cosa nativa entonces. Sin embargo, todavía es extraño.
Sebastian Olsen

17

Como dijo @Nick, los resultados que ve cuando console.logun Errorobjeto JavaScript depende de la implementación exacta de console.log, que varía y (imo) hace que la comprobación de errores sea increíblemente molesta.

Si desea ver el Errorobjeto completo y toda la información que lleva sin pasar por el toString()método, puede usar JSON.stringify :

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

8

Estoy usando estos interceptores para obtener la respuesta de error.

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

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

6

Con TypeScript, es fácil encontrar lo que desea con el tipo correcto.

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

2

Puede usar el operador de propagación ( ...) para forzarlo a un nuevo objeto como este:

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

Tenga en cuenta: esto no será una instancia de error.



1

Hay una nueva opción llamada validateStatusen la configuración de solicitud. Puede usarlo para especificar no lanzar excepciones si el estado <100 o el estado> 300 (comportamiento predeterminado). Ejemplo:

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

0

Puede poner el error en un objeto y registrar el objeto, así:

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

Espero que esto ayude a alguien por ahí.


0

Para que el servidor devuelva el código de estado http, puede agregar validateStatus: status => truea las opciones de axios:

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

De esta manera, cada respuesta http resuelve la promesa devuelta por axios.

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


0

Es mi código: trabaja para mí

 var jsonData = request.body;
    var jsonParsed = JSON.parse(JSON.stringify(jsonData));

    // message_body = {
    //   "phone": "5511995001920",
    //   "body": "WhatsApp API on chat-api.com works good"
    // }

    axios.post(whatsapp_url, jsonParsed,validateStatus = true)
    .then((res) => {
      // console.log(`statusCode: ${res.statusCode}`)

            console.log(res.data)
        console.log(res.status);

        // var jsonData = res.body;
        // var jsonParsed = JSON.parse(JSON.stringify(jsonData));

        response.json("ok")
    })
    .catch((error) => {
      console.error(error)
        response.json("error")
    })
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.