取消axios请求官方文档：http://www.axios-js.com/zh-cn...单机请求index.vue--->请求时一个接口，除了传参数，再传一个this过去。importrequestListfrom'@/api/list.js'//发送请求requestList({id:1},this).then(res=>{}).catch(err=>{})//如何取消请求，传入的是提示this.cancel("OperationCancellation");api/list.js--->API接口，导入axios，定义CancelToken，写新的CancelTokenimportaxiosfrom'axios'constCancelToken=axios.CancelToken;exportfunctionsearchList(data,that){returnrequest({url:'/list',method:'post',disLoading:true,data,cancelToken:newCancelToken(functionexecutor(c){that.cancel=c;})})}全局配置|Mixin使用了vuex的mixin实现。我按照代码进入了cancelToken方法，但是并没有取消请求。后续：找到了请求没有取消的原因。注意{cancelToken:this.cancelToken}不是请求参数，应该放在axiosconfig中，与url同级。另外，参考文档只实现了销毁页面前取消请求。我举个例子——取消上次的请求操作（比如分页点击查询列表，查询第一页再点击第二页，其实也是一样的操作方法，所以第一个被取消。页面的待处理请求）。代码如下：/mixins/cancelTokenMixin.js--->新建mixin文件，写入如下代码，仅用于取消请求：importaxiosfrom'axios';constCancelToken=axios.CancelToken;constcancelTokenMixin={data(){return{cancelToken:null,//cancelToken实例cancel:null//取消方法}},created(){this.newCancelToken();},beforeDestroy(){//离开页面前清除所有请求this.cancel('Cancelrequest');},methods:{//创建一个新的CancelTokennewCancelToken(){this.cancelToken=newCancelToken(c=>{this.cancel=c;});}}}导出默认的cancelTokenMixin；具体的vue文件--->引入mixin，取消上次请求并创建新的cancelToken){//取消最后一次请求this.cancel("OperationCancellation");//使用新的cancelTokenthis.newCancelToken();//记得加上第二个参数：{cancelToken:this.cancelToken}getList({id:1},{cancelToken:this.cancelToken}).then(res=>{}).catch(err=>{})}}api/list.js--->接受两个参数，一个是request参数，一个是config，也就是上面的：{cancelToken:this.cancelToken}exportfunctiongetList(data,config){returnrequest({url:'/resource/link/getAllLink',method:'post',disLoading:true,data,...config})}全局配置|拦截器在其上使用Mixin方法不是很灵活，需要在每次请求前手动调用cancelToken方法，数量多了不好用。参考了别人的文章，可以在axios拦截器中实现。主要逻辑是在set中存储pendingrequests，在发送请求之前取消相同的pendingrequests。但是这种方式有一个严重的缺点：它是针对相同url、相同参数的请求。举个例子来理解——列表的分页，当你点击第一页时，它处于pending中，然后点击第二页，它应该取消第一页的pending，如果你使用这个路由拦截，由于参数不一致（page=1，page=2），所以没有办法防止第一页pending。建议这种地方需要特殊对待。看一下实现方法，写--->utils/cancelRequest.js--->三个方法。constqs=require('qs');constpending=newMap();importaxiosfrom'axios';constCancelToken=axios.CancelToken;/***添加pending请求****/exportconstaddPending=(config)=>{consturl=[config.method,config.url,qs.stringify(config.params),qs.stringify(config.data)].join('&');config.cancelToken=config.cancelToken||newCancelToken(c=>{if(!pending.has(url)){pending.set(url,c);}})console.log(url);}/***取消单个pending请求***/exportconstcancelPending=(config)=>{consturl=[config.method,config.url,qs.stringify(config.params),qs.stringify(config.data)].join('&');如果(pending.has(url)){constcancel=pending.get(url);cancel('取消请求');pending.delete(url);}}/***清空pending请求(退出页面时)***/exportconstclearAllPending=()=>{for(const[url,cancel]ofpending){cancel('cancelrequest');}pending.clear();}src/utils/request.js--->拦截请求前的cancelPending和addPending，拦截并返回cancelPendingimport{cancelPending,addPending}from'@/utils/cancelRequest'service.interceptors.request.use(config=>{cancelPending(config)//在请求开始之前，检查之前的请求并取消操作addPending(config)//将当前请求添加到pendingreturnconfig},error=>{console.log(error)//用于调试returnPromise.reject(error)})service.interceptors.response.use(response=>{cancelPending(response)//请求结束后，移除本次请求},error=>{console.log('err',error)//fordebugreturnPromise.reject(error)})src/permission.js--->清除routeguard中pendingrequest，此时不会请求，因为你离开了页面import{clearAllPending}from'@/utils/cancelRequest'router.beforeEach(async(to,from,next)=>{clearAllPending()//clearpendingrequest})遇到的问题：我用'全局配置|项目中的拦截器和部分取消请求，成功实践了取消请求的功能但是我遇到了一个问题。我第一次点击查询列表。由于我给el-table组件绑定了v-loading="listLoading"，所以我将listLoading设置为true来达到加载表格的效果。这个是正常的。在请求pengding中，再次点击查询，或者设置listLoading=true，然后取消上次请求，开启新的请求，但是table已经没有加载效果了。...我找到了原因。原来promise要求我写一个catch，里面有个listLoading=false。参考：单个取消请求：https://blog.csdn.net/qq_4409...Vue使用Mixin实现取消请求：https://github.com/dadaiwei/v...axios拦截器封装取消请求：https:///segmentfault.com/a/11…
