Manejo de errores con Axios

Axios es una biblioteca de JavaScript que utiliza la API de Promise para crear solicitudes HTTP con http en tiempo de ejecución de Node.js o XMLHttpRequests en el navegador. Porque estos r...

Introducción

Axios es una biblioteca de JavaScript que utiliza la API de Promise para crear solicitudes HTTP con http en tiempo de ejecución de Node.js o XMLHttpRequests en el navegador. Debido a que estas solicitudes son promesas, funcionan con la sintaxis async/await más nueva, así como con las funciones .then() para el encadenamiento de promesas y el mecanismo .catch() para el manejo de errores.

1
2
3
4
5
6
7
8
try {
    let res = await axios.get('/my-api-route');

    // Work with the response...
} catch (err) {
    // Handle error
    console.log(err);
}

En este artículo, veremos cómo manejar los errores con Axios, ya que esto es muy importante cuando se realizan llamadas HTTP sabiendo muy bien que hay momentos en los que el servicio al que está llamando podría no estar disponible o devolver otros errores inesperados. Mostraremos el método .then()/.catch(), pero usaremos principalmente la sintaxis async/await.

Luego y captura

Las promesas se pueden manejar de dos maneras utilizando JS moderno: la sintaxis async/await, que se mostró arriba, así como los métodos .then() y .catch(). Tenga en cuenta que ambos métodos pueden producir la misma funcionalidad, pero normalmente se considera que async/await es más fácil de usar y requiere menos código repetitivo en cadenas de promesas más largas.

Así es como lograría lo mismo, pero usando el método then/catch:

1
2
3
4
5
6
7
axios.get('/my-api-route')
    .then(res => {
        // Work with the response...
    }).catch(err => {
        // Handle error
        console.log(err);
    });

Tanto los objetos res como err son los mismos que con la sintaxis async/await.

Manejo de errores

En esta sección, veremos dos categorías principales de problemas, así como otros problemas que podemos encontrar y cómo manejarlos usando Axios. Es fundamental que comprenda que esto se aplica a todos los tipos de consultas HTTP manejadas por Axios, incluidas GET, POST, PATCH, etc.

Aquí puede ver la sintaxis de los tres aspectos: esto capturará el error; es crucial tener en cuenta que este error contiene un gran objeto de error con mucha información:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
try {
    let res = await axios.get('/my-api-route');

    // Work with the response...
} catch (err) {
    if (err.response) {
        // The client was given an error response (5xx, 4xx)
    } else if (err.request) {
        // The client never received a response, and the request was never left
    } else {
        // Anything else
    }
}

Las diferencias en el objeto de error, resaltadas arriba en el código catch, indican dónde encontró el problema la solicitud. Profundizaremos en esto en las siguientes secciones.

error.response

Este es el tipo de error con el que estamos más familiarizados y es mucho más fácil de tratar. Muchos sitios muestran una página/mensaje de error 404 No encontrado o varios códigos de respuesta basados ​​en lo que proporciona la API; esto a menudo se maneja a través de la respuesta.

Si su objeto de error tiene una propiedad de respuesta, significa que su servidor devolvió un error 4xx/5xx. Esto lo ayudará a elegir qué tipo de mensaje devolver a los usuarios; el mensaje que desea proporcionar para 4xx puede diferir del de 5xx, y si su backend no devuelve nada en absoluto.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
try {
    let res = await axios.get('/my-api-route');

    // Work with the response...
} catch (err) {
    if (err.response) {
        // The client was given an error response (5xx, 4xx)
        console.log(err.response.data);
        console.log(err.response.status);
        console.log(err.response.headers);
    } else if (err.request) {
        // The client never received a response, and the request was never left
    } else {
        // Anything else
    }
}

error.request

Este error suele ser causado por una red defectuosa/irregular, un backend colgado que no responde instantáneamente a cada solicitud, solicitudes no autorizadas o entre dominios y, por último, si la API del backend devuelve un error.

{.icon aria-hidden=“true”}

Nota: Esto ocurre cuando el navegador pudo iniciar una solicitud pero no recibió una respuesta válida por algún motivo.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
try {
    let res = await axios.get('/my-api-route');

    // Work with the response...
} catch (err) {
    if (err.response) {
        // The client was given an error response (5xx, 4xx)
    } else if (err.request) {
        // The client never received a response, and the request was never left
        console.log(err.request);
    } else {
        // Anything else
    }
}

Anteriormente mencionamos que la solicitud subyacente que utiliza Axios depende del entorno en el que se ejecuta. Este es también el caso del objeto err.request. Aquí, el objeto err.request es una instancia de XMLHttpRequest cuando se ejecuta en el navegador, mientras que es una instancia de http.ClientRequest cuando se usa en Node.js.

Otros errores

Es posible que el objeto de error no tenga adjunto un objeto respuesta o solicitud. En este caso, se da a entender que hubo un problema al configurar la solicitud, lo que eventualmente provocó un error.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
try {
    let res = await axios.get('/my-api-route');

    // Work with the response...
} catch (err) {
    if (err.response) {
        // The client was given an error response (5xx, 4xx)
    } else if (err.request) {
        // The client never received a response, and the request was never left
    } else {
        // Anything else
        console.log('Error', err.message);
    }
}

Por ejemplo, este podría ser el caso si omite el parámetro URL de la llamada .get() y, por lo tanto, nunca se realizó ninguna solicitud.

Conclusión

En este breve artículo, analizamos cómo podemos manejar varios tipos de fallas y errores en Axios. Esto también es importante para dar el mensaje correcto a los visitantes de su aplicación/sitio web, en lugar de devolver siempre un mensaje de error genérico, enviar un 404 o indicar problemas de red.