如何使用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