VUEとAxios API：apiからエラーコードをvueコンポーネントに渡します。

Question

これは非常にうまく、重複としてマークされていて、ごめんなさい。 周りにたくさんをグーグルでされて、実際に任意の適切な解決策なしに、これを行う方法を見つけるために（私もVUEの専門家ではないよ...）基本的には

..私は..渡しているの成功を何をしようとしていますapi => store => vueコンポーネントからのエラーです。エラーならば...私は

1）の方法は、VUEのコンポーネントからトリガ（...今のところ）

物事の道を...エラーコードをユーザに提示します。 $ store（modal.vue）へのディスパッチ

2）mutationtypeと呼び出しAPIを設定するための状態アクションがトリガされます。

3）Apiメソッドが呼び出されます。成功またはエラー、AND http.statuscode ....

MODAL.VUE

doRefund: function(){ 
      this.$store.dispatch('doRefund', { 
        Username : this.loggedInUser.account.username, 
        OrderID: this.selectedOrder.orderid, 
        IsFeeApplied: false, 
        CreditAmount: this.refundAmount, 
        ChargeFee: 0.0, 
        Reason: "reason-not-specified", 
        Description: this.comment, 
        BearerToken: "Bearer " + this.accessToken 
      }) 
      .then(result => { 
       if(result === true){ 
        alertify.success('It worked!') 
       } 
       else{ 
        alertify.alert('There was an error, and the errorcode is' + errorcode ????) 
       } 
      }) 
     } 

STORE.JS

doRefund({ commit }, refundParams){ 
     api.tryRefund(refundParams) 
     .then(refundCompleted => { 
      commit(types.SET_REFUND_COMPLETED, true) 
      return true; 
     }) 
     .catch(err => { 
      //TODO: How to i fetch, and pass the errorcode ? 
      commit(types.SET_REFUND_COMPLETED, false) 
      return false; 

     }) 
    }, 

APIの両方を返す

4） .JS

あなたの api.jsファイルであなたの tryRefund方法で rejectハンドラに error.responseを渡す必要がある

tryRefund(refundParams) { 
    console.log('=== try ===='); 
    console.log(refundParams); 
    return new Promise((resolve, reject) => { 
     var config = { 
      headers: { 
       'Content-Type': ' application/json', 
       'Authorization': refundParams.BearerToken 
      } 
     }; 
     return axios.post('the-url-to-the-service', refundParams, config) 
      .then(
       () => resolve(true)) 
      .catch(error => { 
       console.log('=== ERROR ===='); 
       console.log(error.response); 

      }) 
    }); 
} 

Answer 1

：

.catch(err => { 
    //TODO: How to i fetch, and pass the errorcode ? 
    commit(types.SET_REFUND_COMPLETED, false) 
    throw err; 
}) 

：次に

.catch(error => { 
    console.log('=== ERROR ===='); 
    console.log(error.response); 
    reject(error) 
}) 

、あなたはdoRefundアクションメソッドでエラーをスローする必要があります

$dispatchメソッドのcatchハンドラーでそれをキャッチします。

this.$store.dispatch('doRefund', { 
    ...    
}) 
.then(result => { 
    ... 
}) 
.catch(error => { 
    console.log(error); // this is the error you want 
})