Redux/Axiosでエラー応答422を捕捉して処理する方法は？

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

私はエラーをログに記録する場合、これは私が見たものである。

私はネットワーク]タブをチェックすると、私はレスポンスボディを見ることができますが、何らかの理由で、私はアクセスできません。値！

私は無意識のうちにどこかでミスをしたことがありますか？私は別の要求の罰金から他のエラーを処理しているので、この1つを動作させるように見えることはできません。

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はconfig、code、および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があります。そのようなelse文場合は、インラインで使用することができます

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