axios 封装cancelToken取消重复的请求操作

import qs from 'qs' import axios from 'axios'

const pendingRequest = new Map()

// 获取请求相关配置参数 export const getUniRequestKey = (config) => { const { url, method, params, data } = config return [url, method, qs.stringify(params), qs.stringify(data)].join('&') }

// 将重复请求添加到map pendingRequest 中 export const setUniRequestKey = (config) => { const key = getUniRequestKey(config) if (!pendingRequest.has(key)) { config.cancelToken = new axios.CancelToken(c => { // executor 函数接收一个 cancel 函数作为参数 pendingRequest.set(key, c) }) } }

// 取消重复的请求 export const removePendingRequest = (config) => { const key = getUniRequestKey(config) if (pendingRequest.has(key)) { // 请求重复了 const cancelToken = pendingRequest.get(key) cancelToken(key) pendingRequest.delete(key) } } // 取消重复的请求2 export const removePendingRequest1 = (config) => { const key = getUniRequestKey(config) pendingRequest.delete(key) } // 清空pending中的请求 在路由跳转时使用 export const clearPendingRequest = () => { if (pendingRequest.size) { pendingRequest.forEach((value, key) => { console.log(value, key) value(key) }) } }

import axios from 'axios' import { setUniRequestKey, removePendingRequest, removePendingRequest1 } from '@/utils/cancelReRequest' axios.defaults.baseURL = 'http://localhost:9090/'

// 请求拦截器 axios.interceptors.request.use(config => { removePendingRequest(config) setUniRequestKey(config) return config }, err => { return Promise.reject(err) }) // 响应拦截器 axios.interceptors.response.use(response => { removePendingRequest1(response.config) return response.data ? response.data : '' }, (err) => { if (axios.isCancel(err)) { // 处理手动cancel // removePendingRequest1(err.message) } else { removePendingRequest1(err.config) } return new Promise(function () { }) // 如果不return 就会抛出异常 控制台会看到错误 }) export default axios