Làm thế nào để nắm bắt và xử lý đáp ứng lỗi 422 với Redux/Axios?

Question

Tôi có một hành động thực hiện yêu cầu POST tới máy chủ để cập nhật mật khẩu của người dùng, nhưng tôi không thể xử lý lỗi trong khối catch bị chặn.

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

Khi tôi đăng nhập lỗi đây là những gì tôi thấy:

Khi tôi kiểm tra tab mạng tôi có thể nhìn thấy cơ thể phản ứng, nhưng đối với một số lý do tôi không thể truy cập giá trị!

Có tôi vô tình đã làm sai ở đâu đó? Bởi vì tôi đang xử lý các lỗi khác từ yêu cầu khác nhau, nhưng dường như không thể làm việc này.

Answer 1

Axios có thể phân tích cú pháp phản hồi. Tôi truy cập vào các lỗi như thế này trong mã của tôi:

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

Từ các tài liệu:

Câu trả lời cho một yêu cầu có chứa các thông tin sau.

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

Vì vậy, các catch(error =>) thực sự chỉ là catch(response =>)

EDIT:

tôi vẫn không hiểu tại sao đăng nhập trở về lỗi mà chồng nhắn. Tôi đã thử đăng nhập như thế này. Và sau đó bạn thực sự có thể thấy rằng nó là một đối tượng.

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

EDIT2:

Sau khi một số chi tiết nhìn xung quanh this là những gì bạn đang cố gắng để in. Đó là một đối tượng lỗi Javascipt. Axios sau đó tăng cường lỗi này với cấu hình, mã và phản hồi như 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

Tôi cũng bị bối rối về điều này trong một thời gian. Tôi sẽ không rehash những thứ quá nhiều, nhưng tôi nghĩ rằng nó sẽ là hữu ích cho những người khác để thêm 2 xu của tôi.

Mã error trong mã ở trên là loại Error. Điều gì xảy ra là phương thức toString được gọi trên đối tượng lỗi vì bạn đang cố in một thứ gì đó vào bàn điều khiển. Điều này là ngầm định, là kết quả của việc ghi vào bàn điều khiển. Nếu bạn nhìn vào mã của toString trên đối tượng lỗi.

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

Vì vậy, bạn có thể thấy ở trên sử dụng nội bộ để tạo chuỗi để xuất ra bảng điều khiển.

Có tuyệt vời docs về điều này trên mozilla.

Answer 3

Bạn có thể sử dụng inline lệnh if khác như vậy:

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

Answer 4

Ví dụ

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

Kiểm tra đối tượng lỗi cho câu trả lời, nó sẽ bao gồm các đối tượng bạn đang tìm kiếm, do đó bạn có thể làm error.response.status

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