引語：當網路慢的時候。又或者公司伺服器不在內地的時候，介面資料請求不回來超時報錯的情況相信大家肯定遇到過的，這裡我把我公司專案請求超時的處理方法分享下，希望看過後有幫助。

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
}

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