Vue axios取消发送某个请求

在项目中遇到一个情况，因为参数不同而频繁请求一个接口，因为接口的响应速率不同，从而导致最后一次请求的结果被之前的请求覆盖，显示的内容就会出错

想要实现当触发同样的请求时，不轮同时触发多少，只进行最后一次请求

解决方案：

axios.CancelToken

官方文档：http://www.axios-js.com/zh-cn/docs/#%E5%8F%96%E6%B6%88

	该api可以用来取消请求

官方示例：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// cancel the request
cancel();

项目中使用

一、在封装axios的request.js中：

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 15000000 // 请求超时时间
})

//取消请求的方法
service.cancelToken = axios.CancelToken;

//中间代码省略

//暴露service对象供其他文件引用
export default service

二、 在请求的api文件中：

import request from '@/utils/request';
//用于取消请求的发送
//cancelToken就是上面的axios.CancelToken
let cancelToken = request.cancelToken;

//第二个参数将调用时的this传递进来
export const divisionDevList = (data, _this) => {
    return request({
        url:'/xxxxx/xxxx',
        method:'post',
        data,
        cancelToken: new cancelToken(function executor(c) {
        	// cancelRequest将是调用时组件中定义的变量
            _this.cancelRequestFn = c
        }) 
    })
}

三、 发送请求时：

data(){
	return {
		cancelRequestFn:null
	}
}

getDevList(){    
            if(typeof this.cancelRequestFn === 'function'){
            	//函数调用时参数可以用err信息中的message获取到
            	//在响应拦截器的error回调中可以获得错误信息
                this.cancelRequestFn('取消多次点击')
            }
			//第一个参数传递后端交互需要的参数， 第二个参数传递this
            divisionDevList({...param,...this.pageParam}, this).then(res => {
                //实际操作
            })
        },

多次触发：