Vue 結合 Axios 接口超時統一處理

引語：當網路慢的時候。又或者公司服務器不在內地的時候，接口數據請求不回來超時報錯的狀況相信你們確定遇到過的，這裏我把我公司項目請求超時的處理方法分享下，但願看事後有幫助。

axios基本用法就很少說了，詳情直戳 : https://www.kancloud.cn/yunye/axios/234845

主要是思路： 對 axios 請求攔截器下功夫

解決方案一：（缺點：只從新請求1次，若是再超時的話，它就中止了，不會再請求） 後臺只容許你從新發起一次請求（不能給服務器增壓、浪費帶寬無限請求，）下的狀況推薦；

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

 // 請求超時
request.ontimeout = function handleTimeout() {
  reject(createError('timeout of ' + config.timeout + 'ms exceeded', config, 'ECONNABORTED', 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);
    }
});

解決方法二：推薦

//在main.js設置全局的請求次數，請求的間隙
axios.defaults.retry = 4;
axios.defaults.retryDelay = 1000;
axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
 var config = err.config;
 // 若是config不存在或未設置重試選項，請拒絕
 if(!config || !config.retry) return Promise.reject(err);
 // 設置變量跟蹤重試次數
 config.__retryCount = config.__retryCount || 0;
 // 檢查是否已經達到最大重試總次數
 if(config.__retryCount >= config.retry) {
  // 拋出錯誤信息
  return Promise.reject(err);
 }
 // 增長請求重試次數
 config.__retryCount += 1;
 // 建立新的異步請求
 var backoff = new Promise(function(resolve) {
  setTimeout(function() {
   resolve();
  }, config.retryDelay || 1);
 });
 // 返回axios信息，從新請求
 return backoff.then(function() {
  return axios(config);
 });
});

使用：

axios.get('/some/endpoint', { retry: 5, retryDelay: 1000 })
    .then(function(res) {
        console.log('success', res.data);
    })
    .catch(function(err) {
        console.log('failed', err);
    });

配置參數：

retry ：第一次失敗請求後重試請求的次數。
retryDelay: 失敗請求之間等待的毫秒數（默認爲1）。上述就是請求超時處理的的方案了。

擴展 axios 自定義配置新建一個 axios 實例  請求配置信息   Requst Config   如下是開發經常使用的一些配置選項

axios.create([config])

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

config配置：

//新建 config.js
import Qs from 'qs'
{
 //請求的接口，在請求的時候，如axios.get(url,config);這裏的url會覆蓋掉config中的url
 url: '/user',
 // 請求方法同上
 method: 'get', // default
 // 基礎url前綴
 baseURL: 'https://some-domain.com/api/',　　　
 transformRequest: [function (data) {
   // 這裏能夠在發送請求以前對請求數據作處理，好比form-data格式化等，這裏可使用開頭引入的Qs（這個模塊在安裝axios的時候就已經安裝了，不須要另外安裝）
　　data = Qs.stringify({});
  return data;
 }],
 transformResponse: [function (data) {
  // 這裏提早處理返回的數據
  return data;
 }],
 // 請求頭信息
 headers: {'X-Requested-With': 'XMLHttpRequest'},
 //parameter參數
 params: {
  ID: 12345
 },
 //post參數，使用axios.post(url,{},config);若是沒有額外的也必需要用一個空對象，不然會報錯
 data: {
  firstName: 'Fred'
 },
 //設置超時時間
 timeout: 1000,
 //返回數據類型
 responseType: 'json', // default
}

結語： 有不對或有疑問之處，歡迎留言。