vue：cancelToken 取消请求 方法记录

 写项目时，由于服务器或数据量或sql性能问题，请求功能缓慢，百度了CSDN的，整合了一下在写的项目功能，记录一下。

// ======================= main.js 配置 =====================
/**
 * *暂停请求中的接口
 * *cancelList设置批量取消的接口，/**代表符合该规则的全部接口
 * * 全局方法$cancelRequest可取消当前cancelList中的正在请求requset
 * * 全局方法$cancelRequest("url")可控制取消单个请求
 * * this.$cancelRequest('/user/name/**');//取消以‘/user/name/’开头的正在进行中的请求
 * * this.$cancelRequest('/user/age');//取消正在进行中的请求‘/user/age/’
 * * this.$cancelRequest();  //取消apiList设置的全部正在进行中的请求
 * */
const apiList = ['/changeRecord/downloadMeterEntry', '/org/number/**']// 要取消的所有api  对于模块化api 绝大多数情况无意义
Vue.prototype.$currentHttpRequestList = new Map()
Vue.prototype.$cancelRequest = apiUrl => {
  if (apiUrl) {
    if (apiUrl.indexOf('/**') > -1) {
      Vue.prototype.$currentHttpRequestList.forEach((item, key) => {
        key.indexOf(apiUrl.split('/**')[0]) > -1 && item('取消执行')
      })
    } else {
      Vue.prototype.$currentHttpRequestList.get(apiUrl) && Vue.prototype.$currentHttpRequestList.get(apiUrl)('取消执行')
    }
  } else {
    apiList.forEach(eachWite => {
      Vue.prototype.$currentHttpRequestList.forEach((item, key) => {
        key.indexOf(eachWite.split('/**')[0]) > -1 && item('取消执行')
      })
    })
  }
}



// ===========request.js （请求封装）中配置===================
// 请求拦截给每个接口配置cancelToken
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['X-Token'] = getToken()
      //-------加入cancelToken部分---------------------------------------------
      const { CancelToken } = axios // CancelToken能为一次请求‘打标识’
      // 添加cancelToken标识
      config.cancelToken = new CancelToken(function executor(c) {
        Vue.prototype.$currentHttpRequestList.set(config.url, c)
      })
      // -----------------------------------------------------------------------
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)



//====================== api.js 封装的接口页面 ========================
import request from '@/utils/request'

// 例：导出清华大学Excel
export function exportQinghuaExcel(data) {
  return request({
    url: ' studentsArchives/exportQinghuaExcel',
    method: 'post',
    responseType: 'blob',
    data
  })
}



// ======================页面中使用===========================
// 使用案例：导出/下载文件，请求时间过长或接口卡死导致请求按钮一直loading或点了又不想导出了或有些导出次数有限制点错了....，调用方法：cancelRequest()

import { exportQinghuaExcel } from '@/api/request'
methods: {
//取消按钮
over(){
      this.cancelRequest(exportQinghuaExcel) //导出接口：exportQinghuaExcel
  },
//api:要取消请求的接口（实际传的是接口路径url，这里是针对 上面的接口封装 来 截取 接口路径）
cancelRequest(api) {
      const a = api + ''
      const b = a.indexOf('url') + 3
      const c = a.substring(b, a.length)
      const apiUrl = c.split("'")[1]
      console.log(apiUrl, 'url')          //studentsArchives/exportQinghuaExcel  url
      this.$cancelRequest((apiUrl + '').split("'")[1])
  },
}
//=============================================================

cancelToken 也可以用于优化性能，防止重复请求，后续用到 再 '百' 再整合。

重点：'百'  '拷'  'C'   

C多了就会了