¿Cómo puedo obtener el código de estado de un error HTTP en Axios?
Esto puede parecer estúpido, pero estoy intentando obtener los datos del error cuando falla una solicitud en Axios.
axios
.get('foo.example')
.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'}
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);
}
});
Con TypeScript, es fácil encontrar lo que busca con el tipo correcto.
Esto hace que todo sea más fácil porque puedes obtener todas las propiedades del tipo con autocompletar, para que puedas conocer la estructura adecuada de tu respuesta y error.
import { AxiosResponse, AxiosError } from 'axios'
axios.get('foo.example')
.then((response: AxiosResponse) => {
// Handle response
})
.catch((reason: AxiosError) => {
if (reason.response!.status === 400) {
// Handle 400
} else {
// Handle else
}
console.log(reason.message)
})
Además, puede pasar un parámetro a ambos tipos para saber qué espera dentro response.datade esta manera:
import { AxiosResponse, AxiosError } from 'axios'
axios.get('foo.example')
.then((response: AxiosResponse<{user:{name:string}}>) => {
// Handle response
})
.catch((reason: AxiosError<{additionalInfo:string}>) => {
if (reason.response!.status === 400) {
// Handle 400
} else {
// Handle else
}
console.log(reason.message)
})
Como dijo @Nick, los resultados que ves cuando creas console.logun objeto JavaScript Errordependen de la implementación exacta de console.log, lo que varía y (en mi opinión) hace que verificar errores sea increíblemente molesto.
Si desea ver el Errorobjeto completo y toda la información que contiene sin pasar por el toString()método, puede usar JSON.stringify :
axios.get('/foo')
.catch(function (error) {
console.log(JSON.stringify(error))
});
Hay una nueva opción llamada validateStatusen la configuración de solicitud. Puede usarlo para especificar que no se generen excepciones si el estado es <100 o el estado> 300 (comportamiento predeterminado). Ejemplo:
const {status} = axios.get('foo.example', {validateStatus: () => true})
Puede utilizar el operador de extensión ( ...) para forzarlo a formar un nuevo objeto como este:
axios.get('foo.example')
.then((response) => {})
.catch((error) => {
console.log({...error})
})
Tenga en cuenta: esto no será un caso de error.
