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

Question

У меня есть действие, делающее запрос 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 
    } 
}) 

При входе ошибки это то, что я вижу:

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

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

Answer 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:

После некоторых более озираясь this является то, что вы пытаетесь напечатать. Это объект ошибки 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')); 

Answer 2

Я тоже был в тупике. Я не буду слишком много перефразировать, но я подумал, что было бы полезно другим добавить мои 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; 
}; 

Таким образом, вы можете видеть, что над ним используются внутренние элементы для создания строки для вывода на консоль.

На этом мозаике есть отличные docs.

Answer 3

Вы можете использовать встроенный, если другое заявление так:

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

Answer 4

Пример

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