然后是axios 400错误请求调用而不是catch

Posted 2023-02-22

【中文标题】然后是axios 400错误请求调用而不是catch

【英文标题】：Axios 400 error request call then instead of catch

【发布时间】：2018-05-20 15:27:57

【问题描述】：

我有这个功能：

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

当我调用 request 并收到 400 错误时，它调用 then 而不是 catch：

【参考方案1】：

我找到了解决办法

axios拦截器不返回promise引起的问题：

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) 就像一个魅力

【参考方案2】：

这是在旧版本的 Axios 中故意的。

validateStatus 自 v0.11 起已添加到配置中。我们可以使用这个选项来指定有效的状态码范围。默认情况下，有效代码 >= 200 和

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

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

【参考方案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);
  );