axios取消请求

1.创建 cancelAxios.js

import axios from 'axios'
class CancelAxiosEvent {
    handlers = {};//定义一个事件容器
    constructor() { }
    //注册事件
    addCancel(config) {
        config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
            if (!(config.url in this.handlers)) {
                this.handlers[config.url] = cancel
            }
        })
    }
    //触发事件后并移除
    dispatchCancel(config) {
        if (!(config.url in this.handlers)) {
            return
        }
        this.handlers[config.url](config.url)
        delete this.handlers[config.url]
    }
    //触发所有的事件并移除
    dispatchAllCancel() {
        for (let url in this.handlers) {
            delete this.handlers[url](url)
        }
    }
}
export let cancleAxiosEvent = new CancelAxiosEvent()

2.在axios的拦截器中使用

import axios from 'axios'
import {cancleAxiosEvent } from './cancelAxios.js'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const service = axios.create({
  baseURL: 'https://api.github.com', 
})
// request interceptor
service.interceptors.request.use(
  config => {
    //取消上一次的请求
    cancleAxiosEvent.dispatchCancel(config);
    //将当前请求添加到事件队列中
    cancleAxiosEvent.addCancel(config);
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// response interceptor
service.interceptors.response.use(
  response => {
    //请求结束后移除本次请求
    cancleAxiosEvent.dispatchCancel(response.config);
    return response
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)
export default service

3.当离开当前路由页面时取消所有的请求

import router from '../router'
import {CancelAxiosEvent } from './cancelAxios.js'
router.beforeEach(async(to, from, next) => {
    CancelAxiosEvent.dispatchAllCancel();//取消所有的请求
    next()
})