axios终止请求

1.单个请求终止

import axios from 'axios'

data() {
            return {
                cancelPending:null
            }
        }, 

const CancelToken = axios.CancelToken;

axios.get(url, {
                    cancelToken: new CancelToken((c)=> this.cancelPending=c)//实例化一个CancelToken对象,赋值cancel方法
                }).then((res)=>{
                  
                }).catch((err)=> {
                  
                });

 调用：

if (typeof this.cancelPending===`function`){                 
        this.cancelPending()
        this.cancelPending=null
}

const CancelToken = axios.CancelToken;
if(typeof this.cancelPending===`function`){
    this.cancelPending()
    this.cancelPending=null
}
axios.get(url, {
    headers:{token:sessionStorage.getItem('token')},
    params:param,
    cancelToken: new CancelToken((c)=> this.cancelPending=c)
}).then((res)=>{
                  
}).catch((err)=> {
});

2.所有页面终止上一个页面请求

fetch.js

import axios from 'axios'

const clearRequest = {
    source: {
        token: null,
        cancel: null
    }
}
const cancelToken = axios.CancelToken
const source = cancelToken.source()
// 创建axios实例
const service = axios.create({
    cancelToken: source.token,
})

// 转化GET请求，data参数为url地址参数
const formatGET = (config) => {
    const data = config.data
    if(data !== undefined && data !== null){
        data['timestamp'] = Date.parse(new Date());
    }
    if (['get'].indexOf(config.method.toLowerCase()) > -1 && data && config.url.indexOf('?') < 0) {
        config.url = config.url + '?' + Object.keys(data).map(
            (key) => {
                if (data[key] === null || data[key] === undefined) return null
                return `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`
            }
        ).filter(
            (item) => (item !== null && item !== undefined)
        ).join('&')
    }
    return config
}

// request拦截器
service.interceptors.request.use(config => {
    config = formatGET(config)
    config.headers.token = sessionStorage.getItem('token')
    config.cancelToken = clearRequest.source.token
    return config
}, error => {
    Promise.reject(error)
})

export {clearRequest}
export default service

router.js

import Router from 'vue-router'

import {clearRequest} from '@/utils/fetch'
import axios from 'axios'

let router = new Router({})

 router.beforeEach((to, from,next) => {
     if(from.name){
        // 切换路由时清空上个路由未完成的所有请求
        const cancelToken = axios.CancelToken
        clearRequest.source.cancel && clearRequest.source.cancel()
        clearRequest.source = cancelToken.source()
     }
     next()
})
export default router