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