Estoy tratando de entender mejor las promesas de javascript con Axios. Lo que pretendo es manejar todos los errores en Request.js y solo llamar a la función de solicitud desde cualquier lugar sin tener que usar catch() .
En este ejemplo, la respuesta a la solicitud será 400 con un mensaje de error en JSON.
Este es el error que estoy recibiendo:
Uncaught (in promise) Error: Request failed with status code 400
La única solución que encuentro es agregar .catch(() => {}) en Somewhere.js pero estoy tratando de evitar tener que hacer eso. ¿Es posible?
Aquí está el código:
Solicitud.js
export function request(method, uri, body, headers) { let config = { method: method.toLowerCase(), url: uri, baseURL: API_URL, headers: { 'Authorization': 'Bearer ' + getToken() }, validateStatus: function (status) { return status >= 200 && status < 400 } } ... return axios(config).then( function (response) { return response.data } ).catch( function (error) { console.log('Show error notification!') return Promise.reject(error) } ) }En algún lugar.js
export default class Somewhere extends React.Component { ... callSomeRequest() { request('DELETE', '/some/request').then( () => { console.log('Request successful!') } ) } ... }En realidad, no es posible con axios a partir de ahora. Los códigos de estado que se encuentran en el rango de 2xx solamente, se pueden capturar en .then() .
Un enfoque convencional es detectar errores en el bloque catch() como se muestra a continuación:
axios.get('/api/xyz/abcd') .catch(function (error) { if (error.response) { // Request made and server responded console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // The request was made but no response was received console.log(error.request); } else { // Something happened in setting up the request that triggered an Error console.log('Error', error.message); } });Otro enfoque puede ser interceptar solicitudes o respuestas antes de que sean manejadas por then o catch.
axios.interceptors.request.use(function (config) { // Do something before request is sent return config; }, function (error) { // Do something with request error return Promise.reject(error); }); // Add a response interceptor axios.interceptors.response.use(function (response) { // Do something with response data return response; }, function (error) { // Do something with response error return Promise.reject(error); });Si desea obtener acceso a todo el cuerpo del error, hágalo como se muestra a continuación:
async function login(reqBody) { try { let res = await Axios({ method: 'post', url: 'https://myApi.com/path/to/endpoint', data: reqBody }); let data = res.data; return data; } catch (error) { console.log(error.response); // this is the main part. Use the response property from the error object return error.response; } }Puedes ir así: error.response.data
En mi caso, obtuve la propiedad de error del backend. Entonces, usé error.response.data.error
Mi código:
axios .get(`${API_BASE_URL}/students`) .then(response => { return response.data }) .then(data => { console.log(data) }) .catch(error => { console.log(error.response.data.error) })