Axios. Cómo obtener una respuesta de error incluso cuando la API devuelve un error 404, al intentar capturar finalmente

2 minutos de lectura

Avatar de usuario de Jacob Goh
jacob goh

por ejemplo

(async() => {
  let apiRes = null;
  try {
    apiRes = await axios.get('https://silex.edgeprop.my/api/v1/a');
  } catch (err) {
    console.error(err);
  } finally {
    console.log(apiRes);
  }
})();

en finally, apiRes devolverá nulo.

Incluso cuando la API obtiene una respuesta 404, todavía hay información útil en la respuesta que me gustaría usar.

¿Cómo puedo usar la respuesta de error en finally cuando axios arroja error.

https://jsfiddle.net/jacobgoh101/fdvnsg6u/1/

  • Probablemente la información útil de la que hablas está en err? No puedo ver por qué lo quieres en el finally en lugar de la catchpero si lo hace, simplemente guárdelo en el catch a una variable a la que puede acceder en el finally.

    –TJ Crowder

    17 de enero de 2018 a las 10:33

  • @TJCrowder el error en catch no contiene la respuesta de la API. ¡Si puedo evitar esto, entonces su método funcionaría!

    – Jacob Goh

    17 de enero de 2018 a las 10:37


  • Sí, lo hace. (Acabo de hojear la documentación).

    –TJ Crowder

    17 de enero de 2018 a las 10:42

De acuerdo a la documentaciónla respuesta completa está disponible como response propiedad sobre el error.

Así que usaría esa información en el catch bloquear:

(async() => {
  let apiRes = null;
  try {
    apiRes = await axios.get('https://silex.edgeprop.my/api/v1/a');
  } catch (err) {
    console.error("Error response:");
    console.error(err.response.data);    // ***
    console.error(err.response.status);  // ***
    console.error(err.response.headers); // ***
  } finally {
    console.log(apiRes);
  }
})();

Violín actualizado

Pero si lo quieres en finally en su lugar, simplemente guárdelo en una variable que pueda usar allí:

(async() => {
  let apiRes = null;
  try {
    apiRes = await axios.get('https://silex.edgeprop.my/api/v1/a');
  } catch (err) {
    apiRes = err.response;
  } finally {
    console.log(apiRes); // Could be success or error
  }
})();

  • También puedes ver el err definición de tipo aquí para encontrar otros datos útiles 🙂

    –Rafael Tavares

    31 de diciembre de 2020 a las 11:50


Según la documentación de AXIOS (aquí: https://github.com/axios/axios) puedes pasar validateStatus: false en el objeto de configuración a cualquier solicitud de axios.

p.ej

axios.get(url, { validateStatus: false })
axios.post(url, postBody, { validateStatus: false })

También puedes pasar una función como esta: validateStatus: (status) => status === 200
De acuerdo con los documentos, el comportamiento predeterminado es una función que devuelve verdadero si (200

  • ¡Gracias! usé esto como una opción const options = { method: 'GET', headers: { 'Accept': 'application/json'}, url: 'url, validateStatus: false };

    – Joviano Días

    3 de diciembre de 2021 a las 14:47


  • Gracias, funcionó como un encanto.

    – Cuado

    12 de enero de 2022 a las 14:42

  • Gracias, creo que try catch es feo y sobrepasa la base del código. esto es solucionarlo…

    – Denis

    23 de marzo de 2022 a las 9:21

  • No puedo creer cuánto tiempo pasé tratando de averiguar por qué estaba recibiendo 404. Esta solución simple era todo lo que necesitaba.

    – código estético

    6 de octubre de 2022 a las 4:11

Puede tratar el código de estado:

ejemplo usando Ts:

let conf: AxiosRequestConfig = {};

    conf.validateStatus = (status: number) => {
        
        return (status >= 200 && status < 300) || status == 404
    }

    let response = await req.get(url, conf);

¿Ha sido útil esta solución?