解決在vue中axios請求超時的問題

查看更多精彩內容請訪問個人新博客：https://www.cssge.com/

 

 

自從使用Vue2以後，就使用官方推薦的axios的插件來調用API，在使用過程當中，若是服務器或者網絡不穩定掉包了, 大家該如何處理呢? 下面我給大家分享一下個人經歷。

具體緣由

最近公司在作一個項目, 服務端數據接口用的是java輸出的API, 有時候在調用的過程當中會失敗, 在谷歌瀏覽器裏邊顯示Provisional headers are shown。

按照搜索引擎給出來的解決方案，解決不了個人問題.

最近在研究AOP這個開發編程的概念，axios開發說明裏邊提到的欄截器(axios.Interceptors)應該是這種機制，下降代碼耦合度，提升程序的可重用性，同時提升了開發的效率。

帶坑的解決方案一

個人經驗有限，以爲惟一能作的，就是axios請求超時以後作一個從新請求。經過研究 axios的使用說明，給它設置一個timeout = 6000

 

axios.defaults.timeout =  6000;

而後加一個欄截器.

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
});

這個欄截器做用是 若是在請求超時以後，欄截器能夠捕抓到信息，而後再進行下一步操做，也就是我想要用 從新請求。

這裏是相關的頁面數據請求。

 

this.$axios.get(url, {params:{load:'noload'}}).then(function (response) {
    //dosomething();
}).catch(error => {
    //超時以後在這裏捕抓錯誤信息.
    if (error.response) {
        console.log('error.response')
        console.log(error.response);
    } else if (error.request) {
        console.log(error.request)
        console.log('error.request')
        if(error.request.readyState == 4 && error.request.status == 0){
            //我在這裏從新請求
        }
    } else {
        console.log('Error', error.message);
    }
    console.log(error.config);
});

超時以後, 報出 Uncaught (in promise) Error: timeout of xxx ms exceeded的錯誤。

 

 

在 catch那裏，它返回的是error.request錯誤，因此就在這裏作 retry的功能, 通過測試是能夠實現從新請求的功功能， 雖然可以實現 超時從新請求的功能，但很麻煩，須要每個請API的頁面裏邊要設置從新請求。

若是項目有幾十個.vue 文件，若是每一個頁面都要去設置超時從新請求的功能，那我要瘋掉的.

 

並且這個機制還有一個嚴重的bug，就是被請求的連接失效或其餘緣由形成沒法正常訪問的時候，這個機制失效了，它不會等待我設定的6秒，並且一直在刷，一秒種請求幾十次，很容易就把服務器搞垮了，請看下圖, 一眨眼的功能，它就請求了146次。

 

 

帶坑的解決方案二

研究了axios的源代碼，超時後, 會在攔截器那裏 axios.interceptors.response 捕抓到錯誤信息, 且 error.code = "ECONNABORTED"，具體連接

https://github.com/axios/axios/blob/26b06391f831ef98606ec0ed406d2be1742e9850/lib/adapters/xhr.js#L95-L101

    // Handle timeout
    request.ontimeout = function handleTimeout() {
      reject(createError('timeout of ' + config.timeout + 'ms exceeded', config, 'ECONNABORTED',
        request));

      // Clean up request
      request = null;
    };

 

因此，個人全局超時從新獲取的解決方案這樣的。

 

axios.interceptors.response.use(function(response){
....
}, function(error){
    var originalRequest = error.config;
    if(error.code == 'ECONNABORTED' && error.message.indexOf('timeout')!=-1 && !originalRequest._retry){
            originalRequest._retry = true
            return axios.request(originalRequest);
    }
});

 

這個方法，也能夠實現得新請求，但有兩個問題，1是它只從新請求1次，若是再超時的話，它就中止了，不會再請求。第2個問題是，我在每一個有數據請求的頁面那裏，作了許多操做，好比 this.$axios.get(url).then以後操做。

完美的解決方法

以AOP編程方式，我須要的是一個 超時從新請求的全局功能， 要在axios.Interceptors下功夫，在github的axios的issue找了別人的一些解決方法，終於找到了一個完美解決方案，就是下面這個。

https://github.com/axios/axios/issues/164#issuecomment-327837467

 

//在main.js設置全局的請求次數，請求的間隙
axios.defaults.retry = 4;
axios.defaults.retryDelay = 1000;

axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
    var config = err.config;
    // If config does not exist or the retry option is not set, reject
    if(!config || !config.retry) return Promise.reject(err);
    
    // Set the variable for keeping track of the retry count
    config.__retryCount = config.__retryCount || 0;
    
    // Check if we've maxed out the total number of retries
    if(config.__retryCount >= config.retry) {
        // Reject with the error
        return Promise.reject(err);
    }
    
    // Increase the retry count
    config.__retryCount += 1;
    
    // Create new promise to handle exponential backoff
    var backoff = new Promise(function(resolve) {
        setTimeout(function() {
            resolve();
        }, config.retryDelay || 1);
    });
    
    // Return the promise in which recalls axios to retry the request
    return backoff.then(function() {
        return axios(config);
    });
});

其餘的那個幾十個.vue頁面的 this.$axios的get 和post 的方法根本就不須要去修改它們的代碼。

 

參考文章：https://juejin.im/post/5abe0f94518825558a06bcd9