在vue项目中取消axios请求（单个和全局）

取消axios请求的官方文档说明：http://www.axios-js.com/zh-cn...

单个请求

index.vue--->在请求接口时，除了传递参数，再传递一个this过去。

import requestList from '@/api/list.js'
//发出请求
requestList({id:1},this).then(res=>{}).catch(err=>{})

//取消请求的写法，传进去的是提示
this.cancel("操作取消");

api/list.js---> API接口处，引入axios，定义CancelToken，写new CancelToken

import axios from 'axios'
const CancelToken = axios.CancelToken;

export function searchList(data, that) {
    return request({
        url: '/list',
        method: 'post',
        disLoading: true,
        data,
        cancelToken: new CancelToken(function executor(c) {
            that.cancel = c;
        })
    })
}

全局配置 | Mixin

使用vuex的mixin实现，我跟着代码打了一遍，虽然进入了cancelToken的方法，但是并没有取消请求。
后续：找到没有取消请求的原因了，要注意{ cancelToken: this.cancelToken }这个东西不是请求参数，而是要放到axios config中，与url平级的。另外参考文档里只实现了销毁页面前取消请求，我举一反三——取消上一次请求操作（比如分页点击查询列表，查询第一页再点击第二页，其实是同操作方法，所以取消了第一页的pending请求）。代码如下：

/mixins/cancelTokenMixin.js --->新建一个这个mixin文件，写以下代码，只用于取消请求：

import axios from 'axios';
const CancelToken = axios.CancelToken;

const cancelTokenMixin = {
    data() {
        return {
            cancelToken: null, // cancelToken实例
            cancel: null // cancel方法
        }
    },
    created() {
        this.newCancelToken();

    },
    beforeDestroy() {
        //离开页面前清空所有请求
        this.cancel('取消请求');
    },
    methods: {
        //创建新CancelToken
        newCancelToken() {
            this.cancelToken = new CancelToken(c => {
                this.cancel = c;
            });
        }
    }
}
export default cancelTokenMixin;

具体vue文件--->引入mixin，在请求之前取消上次请求并创建新cancelToken

import cancelTokenMixin from "@/utils/cancelTokenMixin";
import getList from '@/api/list';

mixins: [cancelTokenMixin],

methods:{
    handleList(){
        //取消上一次请求
        this.cancel("操作取消");
        //使用新的cancelToken
        this.newCancelToken();
        //记得增加第二个参数：{ cancelToken: this.cancelToken }
        getList({id:1},{ cancelToken: this.cancelToken }).then(res=>{}).catch(err=>{})
    }
}

api/list.js---> 接受两个参数，一个是请求参数，还有一个是config，就是上面这个：{ cancelToken: this.cancelToken }

export function getList(data, config) {
    return request({
        url: '/resource/link/getAllLink',
        method: 'post',
        disLoading: true,
        data,
        ...config
    })
}

全局配置 | interceptors

上面使用Mixin方法不太灵活，需要在每次请求前手动调用cancelToken方法，多了就不太好用了。。参考了别人的文章，可以在axios 拦截器中实现。主要逻辑就是针对pending请求，把它们保存在set里，发出请求前取消相同的pending请求。但是这种方法有一个严重的缺点就是：它是针对同url且同参数的请求。举个例子来说就明白了——列表的分页，点击第一页时在pending中，这时点击第二页，理应应该取消第一页的pending，如果你用这个路由拦截，由于传参不一致（page=1,page=2），所以无法阻止第一页还在pending。建议这种地方需要特殊处理呢。
先来看看实现方式把--->

utils/cancelRequest.js--->写三个方法。

const qs = require('qs');
const pending = new Map();
import axios from 'axios';
const CancelToken = axios.CancelToken;

/**
 * 添加pending请求
 *
 * **/
export const addPending = (config) => {
    const url = [config.method, config.url, qs.stringify(config.params), qs.stringify(config.data)].join('&');
    config.cancelToken = config.cancelToken || new CancelToken(c => {
        if (!pending.has(url)) {
            pending.set(url, c);
        }
    })
    console.log(url);
}

/**
 * 取消单个pending请求
 * **/
export const cancelPending = (config) => {
    const url = [config.method, config.url, qs.stringify(config.params), qs.stringify(config.data)].join('&');
    if (pending.has(url)) {
        const cancel = pending.get(url);
        cancel('cancel request');
        pending.delete(url);
    }
}
/**
 * 清空pending请求(退出页面时)
 * **/
export const clearAllPending = () => {
    for (const [url, cancel] of pending) {
        cancel('cancel request');
    }
    pending.clear();
}

src/utils/request.js--->拦截请求之前cancelPending和addPending，拦截返回cancelPending

import { cancelPending, addPending } from '@/utils/cancelRequest'
service.interceptors.request.use(
  config => {
    cancelPending(config) // 在请求开始前，对之前的请求做检查取消操作
    addPending(config) // 将当前请求添加到 pending 中
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    cancelPending(response) // 在请求结束后，移除本次请求
  },
  error => {
    console.log('err', error) // for debug
    return Promise.reject(error)
  }
)

src/permission.js--->路由守卫中清空pending的请求，这时因为离开页面了就不请求了

import { clearAllPending } from '@/utils/cancelRequest'

router.beforeEach(async (to, from, next) => {
  clearAllPending()//清空pending请求
})

遇到的问题：
我在项目里使用了‘全局配置 | interceptors’和局部取消请求的方式，已经成功实践取消请求的功能。但是遇到一个问题，第一次点击查询列表，由于我在el-table组件绑定了v-loading="listLoading",所以设置listLoading为true，以达到加载表格的效果，这时是正常的，请求pengding中，再次点击查询，还是设置了listLoading=true，接着cancel上一次请求并开启新的请求了，可是表格不再有加载效果。。。。
找到原因了，原来是promise请求我写了个catch，在那里有一个listLoading=false。

---

参考：单个取消请求：https://blog.csdn.net/qq_4409...
vue使用Mixin实现取消请求：https://github.com/dadaiwei/v...
axios 拦截器封装取消请求：https://segmentfault.com/a/11...