¿Cómo capturar y manejar la respuesta de error 422 con Redux/Axios?

Necesitamos tu apoyo para extender nuestros posts sobre las ciencias informáticas.

Solución:

Ejemplo

getUserList() 
    return axios.get('/users')
      .then(response => response.data)
      .catch(error => 
        if (error.response) 
          console.log(error.response);
        
      );
  

Verifique la respuesta del objeto de error, incluirá el objeto que está buscando para que pueda hacer error.response.status

https://github.com/mzabriskie/axios#handling-errors

Axios probablemente esté analizando la respuesta. Accedo al error así en mi código:

axios(
  method: 'post',
  responseType: 'json',
  url: `$SERVER_URL/token`,
  data: 
    idToken,
    userEmail
  
)
 .then(response => 
   dispatch(something(response));
 )
 .catch(error => 
   dispatch( type: AUTH_FAILED );
   dispatch( type: ERROR, payload: error.data.error.message );
 );

De los documentos:

La respuesta a una solicitud contiene la siguiente información.

  // `data` is the response that was provided by the server
  data: ,

  // `status` is the HTTP status code from the server response
  status: 200,

  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',

  // `headers` the headers that the server responded with
  headers: ,

  // `config` is the config that was provided to `axios` for the request
  config: 

Entonces el catch(error => ) en realidad es solo catch(response => )

EDITAR:

Todavía no entiendo por qué registrar el error devuelve ese mensaje de pila. Intenté registrarlo así. Y luego puedes ver que es un objeto.

console.log('errorType', typeof error);
console.log('error', Object.assign(, error));

EDIT2:

Después de mirar un poco más, esto es lo que está tratando de imprimir. Que es un objeto de error de Javascipt. Luego, Axios mejora este error con la configuración, el código y la respuesta de esta manera.

console.log('error', error);
console.log('errorType', typeof error);
console.log('error', Object.assign(, error));
console.log('getOwnPropertyNames', Object.getOwnPropertyNames(error));
console.log('stackProperty', Object.getOwnPropertyDescriptor(error, 'stack'));
console.log('messageProperty', Object.getOwnPropertyDescriptor(error, 'message'));
console.log('stackEnumerable', error.propertyIsEnumerable('stack'));
console.log('messageEnumerable', error.propertyIsEnumerable('message'));

Esta es la forma correcta de manejar el error objeto:

axios.put(this.apiBaseEndpoint + '/' + id, input)
.then((response) => 
    // Success
)
.catch((error) => 
    // Error
    if (error.response) 
        // The request was made and the server responded with a status code
        // that falls out of the range of 2xx
        // 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
        // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
        // http.ClientRequest in node.js
        console.log(error.request);
     else 
        // Something happened in setting up the request that triggered an Error
        console.log('Error', error.message);
    
    console.log(error.config);
);

URL de origen https://gist.github.com/fgilio/230ccd514e9381fafa51608fcf137253

Comentarios y puntuaciones del artículo

Si te ha sido de ayuda nuestro artículo, sería de mucha ayuda si lo compartes con otros juniors y nos ayudes a difundir esta información.

---

---

Utiliza Nuestro Buscador