Axios 400 錯誤請求調用 then 而不是 catch

Question

我有這個 function：

add(App, Params, Callback){
    var self = this;

    var Data = self.process_fields(Params)

    self.$http.post(
        paths.api + '/app/' + App.Permalink,
        new URLSearchParams(Data)
    ).then(function (error, response) {
        console.log("then");
        if (typeof (Callback) == "function") {
            Callback(true, response.data.data);
        }
    }).catch(function(error){
        console.log("catch");
        if(typeof error.response !== "undefined"){
            errors.render(error.response.data.error)
        }

        if (typeof (Callback) == "function") {
            Callback(false, null);
        }
    });
}

當我調用請求並收到 400 錯誤時，它調用 then 而不是 catch：

Answer 1

我找到了解決方案

在axios攔截器中不返回承諾引起的問題：

axios.interceptors.response.use((response) => {
    return response;
}, (error) => {
    if (!error.response) {
        alert('NETWORK ERROR')
    } else {
        const code = error.response.status
        const response = error.response.data
        const originalRequest = error.config;

        if (code === 401 && !originalRequest._retry) {
            originalRequest._retry = true

            auth.commit('logout');
            window.location.href = "/login";
        }

        return Promise.reject(error)
    }
});

添加return Promise.reject(error)就像一個魅力

Answer 2

這是 Axios 的舊版本中的目的。

從 v0.11 開始， validateStatus已添加到配置中。 我們可以使用此選項來指定有效的狀態代碼范圍。 默認情況下，有效代碼為 >= 200 且 < 300。

validateStatus: function (status) {
  return status >= 200 && status < 300; // default
},

參考：https://github.com/axios/axios/issues/41#issuecomment-215100137

Answer 3

添加一個響應攔截器，如

axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });