如何使用Redux/Axios捕获和处理错误响应422？

Question

我有一个动作向服务器发出POST请求以更新用户的密码，但我无法处理链接的catch块中的错误。

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

编辑：

我仍然不明白为什么日志记录堆栈信息错误再次出现。我试图像这样记录它。然后你可以看到它是一个对象。

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

所以，你可以在上面看到它使用了内部建立起来的字符串输出到控制台。

这对mozilla有很大的docs。

Answer 3

您可以使用内嵌的if else语句，像这样：

.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