vue项目强制中断请求CancelToken

使用场景：

某个列表接口返回数据有时会比较慢，此时如果用户多次点击搜索按钮，会出现新数据被上一次请求的数据覆盖掉的问题，页面上展示的不是用户想要看到的数据，此时可以在每次发送请求时，判断一下上一次的请求是否已经请求结束，如未结束，强制中断掉上一次的请求，代码如下

在request.js中

import axios from 'axios'
const CancelToken = axios.CancelToken
var cancelHash = {
    
    }
const service = axios.create({
    
    
  // baseURL: process.env.NODE_ENV === 'production' ? window.productionUrl : window.developmentUrl,
  timeout: window.timeout, // request timeout
})
/**
 * 设置请求拦截器
 */
service.interceptors.request.use(
  config => {
    
    
    if (process.env.NODE_ENV === 'production') {
    
    
      config.url = window.productionUrl + config.url; // 线上打包地址
    }

    let token = localStorage.getItem('Authorization')
    if (token) {
    
    
      // 如果token不为null，否则传token给后台
      config.headers.Authorization = token
    }
    if(cancelHash[config.url]) {
    
    
      const source = CancelToken.source()
      config.cancelToken = source.token
      // source.cancel('重复请求')
      cancelHash[config.url](`取消上次${
      
      config.url}未完成请求`)
    } else {
    
    
      cancelHash[config.url] && cancelHash[config.url](`取消上次${
      
      config.url}未完成请求`)
      config.cancelToken = new CancelToken(function executor(c) {
    
    
        cancelHash[config.url] = c
      })
    }

    return config
  },
  error => {
    
    
    return Promise.reject(error)
  }
)


/*响应拦截*/
service.interceptors.response.use(
  response => {
    
    
    delete cancelHash[response.config.url]
    return response
  },
  error => {
    
    
    
  }
)