Как поймать и обработать ответ об ошибке 422 с помощью Redux/Axios?

У меня есть действие, делающее запрос POST на сервер, чтобы обновить пароль пользователя, но я не могу обработать ошибку в цепочке блоков.

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
  }
})

Когда я регистрирую ошибку, это то, что я вижу:

Когда я проверяю вкладку сети, я могу видеть тело ответа, но по какой-то причине я не могу получить доступ к значениям!

Я что-то неосознанно допустил ошибку? Потому что я обрабатываю другие ошибки с разных запросов, но не могу работать с этим.

Ответ 1

Axios, вероятно, анализирует ответ. Я получаю доступ к такой ошибке в моем коде:

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

Из документов:

Ответ на запрос содержит следующую информацию.

{
  // `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: {}
}

Итак, catch(error => ) на самом деле просто catch(response => )

EDIT:

Я до сих пор не понимаю, почему регистрация сообщения об ошибке возвращает это сообщение стека. Я пробовал записывать его так. И тогда вы можете увидеть, что это объект.

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

EDIT2:

После того, как вы посмотрите еще это, вы пытаетесь напечатать. Это объект ошибки Javascipt. Затем Axios усиливает эту ошибку с помощью конфигурации, кода и ответа вроде this.

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

Ответ 2

Пример

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

Отметьте объект ошибки для ответа, он будет включать объект, который вы ищете, чтобы вы могли сделать error.response.status

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

Ответ 3

Я тоже был в тупике. Я не буду слишком много перефразировать, но я подумал, что было бы полезно другим добавить мои 2 цента.

error в приведенном выше коде имеет тип error. Случается, что метод toString вызывается об ошибке, потому что вы пытаетесь напечатать что-то на консоли. Это неявно, результат написания на консоли. Если вы посмотрите код toString на объект ошибки.

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;
};

Итак, вы можете видеть выше, он использует внутренние элементы для создания строки для вывода на консоль.

В mozilla есть большие docs.

Ответ 4

Вы можете использовать inline if else так:

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