el-tabs 切换时还在请求上一个页面接口

解决方法:

因为后端接口返回数据较慢，切换页面或(tabs)中断上一个页面的axios请求

步骤：

1. 在main.js，全局挂载一个$httpRequestList

Vue.$httpRequestList = [] // 用来装cancel函数

2. 在require文件封装的axios请求里面，将cancel函数推入httpRequestList数组：

service.interceptors.request.use(
  (config) => {
    config['cancelToken'] = new axios.CancelToken(function executor(cancel) {
      Vue.$httpRequestList.push(cancel) //存储cancle
    })
    ......
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
)

   响应拦截器，切换页面会走这里

// response interceptor
service.interceptors.response.use(
  (response) => {
  ......
  },
  (err) => {
    if(err.message === 'interrupt') {
      console.log('请求中断');
      return new Promise(() => {});
    }
  }
)

3.定义function, 在需要中断的时候调用（一般在路由拦截中或者tabs切换时调用函数）

<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
  <el-tab-pane label="主机状态" name="main">
    <boardMiam v-if="activeName === 'main'" > </boardMiam>
  </el-tab-pane>
  <el-tab-pane label="通道信息配置" name="role">
    <boardRole v-if="activeName === 'role'" > </boardRole>
  </el-tab-pane>
</el-tabs>

   当前页面引入import Vue from 'vue'

handleClick(tab, event) {
  ......
  // 判断是否有存储的cancle
  if (Vue.$httpRequestList.length > 0) {
    Vue.$httpRequestList.forEach((item) => {
      // 给个标志，中断请求
      item('interrupt');
    });
    Vue.$httpRequestList = [];
  }
}