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

5 minutos de lectura

avatar de usuario
Felipe Boateng

Tengo una acción haciendo un POST solicitud al servidor para actualizar la contraseña de un usuario, pero no puedo manejar el error en el bloque catch encadenado.

return axios({
  method: 'post',
  data: {
    password: currentPassword,
    new_password: newPassword
  },
  url: `path/to/endpoint`
})
.then(response => {
  dispatch(PasswordUpdateSuccess(response))
})
.catch(error => {
  console.log('ERROR', error)
  switch (error.type) {
    case 'password_invalid':
      dispatch(PasswordUpdateFailure('Incorrect current password'))
      break
    case 'invalid_attributes':
      dispatch(PasswordUpdateFailure('Fields must not be blank'))
      break
  }
})

Cuando registro el error esto es lo que veo:

error registrado

Cuando reviso la pestaña de red, puedo ver el cuerpo de la respuesta, pero por alguna razón no puedo acceder a los valores.

Ficha Red

¿He cometido un error sin saberlo en alguna parte? Porque estoy manejando bien otros errores de diferentes solicitudes, pero parece que no puedo resolver este.

  • axios & catch & error.respuesta

    – xgqfrms

    6 de febrero de 2020 a las 7:02

Ejemplo

getUserList() {
    return axios.get("https://stackoverflow.com/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

ingrese la descripción de la imagen aquí

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

  • ¡Exactamente lo que necesitaba! Gracias

    – lucasmonteiro001

    18/04/2017 a las 20:47

  • ¡Sí! Al acceder a err.response obtengo lo que necesito, ¡gracias!

    – Notorio

    6 de agosto de 2017 a las 4:48

avatar de usuario
Jeroen Wienk

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 alrededor este es lo que está tratando de imprimir. Que es un objeto de error de Javascipt. Axios luego mejora este error con la configuración, el código y la respuesta como este.

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'));

  • Gracias por su respuesta detallada, revisé el código del repositorio que ayudó. Finalmente, registré el objeto y pude ver el objeto de respuesta y manejar los datos. código adicional: let e = {...error} switch (e.response.data.type)

    – Felipe Boateng

    07/08/2016 a las 19:20


Esta es la forma correcta de manejar el error objeto:

axios.put(this.apiBaseEndpoint + "https://stackoverflow.com/" + 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

axios.post('http://localhost:8000/api/auth/register', {
    username : 'test'
}).then(result => {
    console.log(result.data)
}).catch(err => {
    console.log(err.response.data)
})

agregar captura obteniendo respuesta de error ==> err.response.data

También estuve perplejo en esto por un tiempo. No repetiré demasiado las cosas, pero pensé que sería útil para otros agregar mis 2 centavos.

los error en el código de arriba es de tipo Error. Lo que pasa es el Encadenar se llama al método en el objeto de error porque está intentando imprimir algo en la consola. Esto es implícito, como resultado de escribir en la consola. Si observa el código de toString en el objeto de error.

Error.prototype.toString = function() {
  'use strict';

  var obj = Object(this);
  if (obj !== this) {
    throw new TypeError();
  }

  var name = this.name;
  name = (name === undefined) ? 'Error' : String(name);

  var msg = this.message;
  msg = (msg === undefined) ? '' : String(msg);

  if (name === '') {
    return msg;
  }
  if (msg === '') {
    return name;
  }

  return name + ': ' + msg;
};

Como puede ver arriba, usa los componentes internos para construir la cadena para enviar a la consola.

hay genial documentos en esto en mozilla.

  • Esto me ayudó a resolver mi problema gracias!

    – tany4

    30 de junio a las 13:55

avatar de usuario
Antonio Artemiev

Puede usar una declaración en línea si no así:

.catch(error => {
    dispatch({
        type: authActions.AUTH_PROCESS_ERROR,
        error: error.response ? error.response.data.code.toString() : 'Something went wrong, please try again.'
    }); 
});

  • Esto me ayudó a resolver mi problema gracias!

    – tany4

    30 de junio a las 13:55

avatar de usuario
chrislow

Lo único que me ayudó fue lo siguiente:

axios.put('/api/settings', settings, {
  validateStatus: status => status >= 200 && status < 300 || status === 422
})

https://stackoverflow.com/a/66285529/5849569

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad