vue axios在封装的请求类中取消请求

需求：搜索页做实时搜索时，选项卡多次切换后等功能。当执行相应的操作后，发现返回的数据是前面N个请求中的某个响应的数据。在回去一看接口，我尼玛，没错呀！

分析：因为axios请求是异步请求，当请求过快（操作过快）时返回的数据就无法确定是哪个请求（操作）之后响应的数据了。

解决：
axios取消请求-传送门

1，search.vue

import {CancelToken,isCancel} from 'axios'
export default{
	data(){
		return {
			source:null
		}
	},
	methods:{
		// 取消请求
		cancelQuest(){
            console.log(this.source)
            if(typeof this.source === 'function'){
                this.source('终止请求');
            }
        },
        search(){
            that.cancelQuest();	// 先判断一下是否取消请求
            
            that.$api.fixedGoodsListApi(
            	{cancelToken: new CancelToken(function executor(c) {that.source = c;})}		// 主要的代码
            )
                .then( res => {
                
                })
                .catch( err => {
                    console.log(err)
                    if(isCancel(err)){
                        console.log(err)
                    }
                });
        }
	}
}

2，request.js 请求类

export default{
    dataRequest(url,data={},options={},method='post',contenttype='application/x-www-form-urlencoded'){
        return new Promise((resolve,reject) =>{
            axios({
                url:url,
                method:method,
                data:qs.stringify(data),
                headers:{
                    'Content-Type':contenttype,
                    'X-Requested-With':'XMLHttpRequest'
                },
                ...options		// 执行取消操作
            })
            .then( res => {
                resolve(res.data)
            })
            .catch( res => {
                reject(res)
            })
        })
    }
}