Cómo validar el estado de las respuestas con validateStatus en Axios
¿Qué es y cómo funciona validateStatus en Axios?
La propiedad validateStatus es una función que recibe el código de estado de la respuesta HTTP y retorna true o false. Si retorna true, Axios tratará la respuesta como exitosa, y si retorna false, lanzará un error.
Este mecanismo es útil cuando quieres controlar qué códigos de estado deben tratarse como éxitos o errores en tu aplicación. Por ejemplo, podrías querer tratar códigos 400 o 500 como éxitos para un manejo particular.
Ejemplo básico de uso
const axios = require('axios');
axios.get('https://api.ejemplo.com/datos', {
validateStatus: function (status) {
return status < 500; // Considera como exitosos todos los códigos menores a 500
}
})
.then(response => {
console.log('Respuesta exitosa:', response.data);
})
.catch(error => {
console.log('Error en la solicitud:', error.message);
});En este ejemplo, cualquier código de estado por debajo de 500 será tratado como éxito, lo que incluye los códigos 400 (errores del cliente).
Ejemplos adicionales
Aceptar solo respuestas con estado 200 o 201
Si solo quieres tratar las respuestas con código de estado 200 OK o 201 Created como éxitos, puedes ajustar la función validateStatus de la siguiente manera:
axios.get('https://api.ejemplo.com/recurso', {
validateStatus: function (status) {
return status === 200 || status === 201; // Solo 200 y 201 se consideran éxitos
}
})
.then(response => {
console.log('Éxito con estado:', response.status);
})
.catch(error => {
console.log('Error detectado:', error.message);
});Aquí, solo las respuestas con estado 200 o 201 serán consideradas exitosas, mientras que cualquier otro código de estado será tratado como un error.
Considerar códigos 400 como éxito para manejo de validación
En ciertos casos, es posible que quieras manejar respuestas con un código de estado 400 como éxitos, por ejemplo, cuando un formulario es enviado con errores de validación y deseas manejar la respuesta en lugar de lanzar un error:
axios.post('https://api.ejemplo.com/formulario', {
nombre: 'Juan'
}, {
validateStatus: function (status) {
return status === 200 || status === 400; // Considera 200 y 400 como éxito
}
})
.then(response => {
if (response.status === 400) {
console.log('Errores de validación:', response.data.errores);
} else {
console.log('Formulario enviado exitosamente:', response.data);
}
})
.catch(error => {
console.log('Error en la solicitud:', error.message);
});
En este caso, tanto las respuestas con estado 200 (éxito) como las de estado 400 (errores de validación) serán tratadas exitosamente, y podrás manejar los errores de validación dentro de la respuesta en lugar de un bloque de catch.
Referencia oficial
Puedes consultar más detalles sobre validateStatus en la documentación oficial de Axios.
Jorge García
Fullstack developer