开始

在全局包装一层axios，方便之后的调用、权限、异常等处理。

utils/http.js

  1. const axios = require('axios');
  3. const http = function() {
  4.   // 全局的请求次数，请求的间隙，超时时间
  5.   axios.defaults.retry = 1;
  6.   axios.defaults.retryDelay = 100;
  7.   axios.defaults.timeout = 1000 * 36;
  9.   // 包装request
  10.   axios.interceptors.request.use(
  11.     function(config) {
  12.       // Do something before request is sent
  13.       return config;
  14.     },
  15.     function(error) {
  16.       // Do something with request error
  17.       return Promise.reject(error);
  18.     },
  19.   );
  21.   // 包装response
  22.   axios.interceptors.response.use(
  23.     function(response) {
  24.       return response.data;
  25.     },
  26.     function(error) {
  27.       // error.response 是接口返回等结构体
  28.       // 如果为undefined，就视为没有返回，体现为超时
  29.       if (error.response) {
  30.         // 对特殊错误码进行处理
  31.         if (error.response.status === 401) {
  32.           window.location.href = '/login?callback=' + window.location.href;
  33.         }
  34.         return Promise.reject(error);
  35.       } else {
  36.         var config = error.config;
  37.         // 如果配置不存在或未设置重试选项，就拒绝
  38.         if (!config || !config.retry) return Promise.reject(error);
  39.         // 设置用于跟踪重试计数的变量
  40.         config.__retryCount = config.__retryCount || 0;
  41.         // 检查我们是否已达到最大重试次数
  42.         if (config.__retryCount >= config.retry) {
  43.           // 以错误拒绝
  44.           return Promise.reject(err);
  45.         }
  46.         // 增加重试次数
  47.         config.__retryCount += 1;
  48.         // 创建新承诺以处理指数退避
  49.         var backoff = new Promise(function(resolve) {
  50.           setTimeout(function() {
  51.             resolve();
  52.           }, config.retryDelay || 1);
  53.         });
  54.         // 返回撤回axios重试请求的承诺
  55.         return backoff.then(function() {
  56.           return axios(config);
  57.         });
  58.       }
  59.     },
  60.   );
  61.   return axios;
  62. }
  64. Vue.prototype.$http = http();

其他的那个几十个.vue 页面的 this.$http 的 get 和 post 的方法根本就不需要去修改它们的代码。