简述
文档处提到两种撤销请求的方式，可满足各种取消请求的场景
单个接口取消
通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token
interface.js：
import axios from 'axios'
export function getXXX(data, that = {}, cancelFuncName = 'cancel') {
return request({
timeout: 6000,
url: '/xxxx',
method: 'post',
data,
cancelToken: new axios.CancelToken(function executor(c) {
that[cancelFuncName] = c
}),
})
}
多个接口同时取消
使用 CancelToken.source 工厂方法创建一个 cancel token，借助vuex和vue-router处理页面跳转的接口
interface.js：
import axios from 'axios'
// 初始化取消请求对象
const CancelToken = axios.CancelToken
const source = CancelToken.source()
export function getXXX(data) {
return request({
url: '/xxx,
method: 'post',
data,
cancelToken: source.token,
})
}
store.js：
import Vuex from 'vuex'
const store = new Vuex.Store({
state: {
source: {
token: null,
cancel: null,
},
},
})
export default store
router.js：
import router from './router'
import axios from 'axios'
import store from './store'
router.beforeEach(async(to, from, next) => {
const CancelToken = axios.CancelToken
store.state.source.cancel && store.state.source.cancel()
store.state.source = CancelToken.source()
next()
})
request.js：
import store from '@/store'
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
})
service.interceptors.request.use(config => {
// 初始化axios中的cancelToken
config.cancelToken = store.source.token
return config
}, err => {
return Promise.reject(err)
})
封装CancelToken
import axios from 'axios'
export default class CancelToken {
// 声明一个 Map 用于存储每个请求的标识 和 取消函数
static pending = new Map()
// 白名单, 写入接口名称
static whiteRequest = []
/**
* 得到该格式的url
* @param {AxiosRequestConfig} config
* @returns
*/
static getUrl(config) {
return [config.method, config.url].join('&')
}
/**
* 添加请求
* @param {AxiosRequestConfig} config
*/
static addPending(config) {
const url = this.getUrl(config)
config.cancelToken = new axios.CancelToken(cancel => {
if (!this.pending.has(url)) { // 如果 pending 中不存在当前请求，则添加进去
this.pending.set(url, cancel)
}
})
}
/**
* 移除请求
* @param {AxiosRequestConfig} config
*/
static removePending(config) {
const url = this.getUrl(config)
const method = url.split('&')[1]
console.log(method)
if (this.pending.has(url) && !this.whiteRequest.includes(method)) { // 如果在 pending 中存在当前请求标识，需要取消当前请求，并且移除
const cancel = this.pending.get(url)
cancel(url)
this.pending.delete(url)
}
}
/**
* 清空 pending 中的请求（在路由跳转时调用）
*/
static clearPending() {
for (const [url, cancel] of this.pending) {
cancel(url)
}
this.pending.clear()
}
}
用法：
service.interceptors.request.use(
config => {
// 这里的判断用于处理白名单不参与取消请求
if (!CancelToken.whiteRequest.includes(`${config.url}`)) {
// 请求开始前，检查一下是否已经有该请求了，有则取消掉该请求
CancelToken.removePending(config)
// 把当前请求添加进去
CancelToken.addPending(config)
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
},
)
instance.interceptors.response.use((resp: AxiosResponse<IResponse>) => {
// 接口响应之后把这次请求清除
CancelToken.removePending(resp.config)
if(resp.data.status === 200) {
// 接口请求成功
return resp.data.data
}
return Promise.reject('')
})
router.beforeEach((to, from, next) => {
// 路由跳转要清除之前所有的请求缓存
CancelToken.clearPending()
next()
})
