Axios利用CancelToken取消重复请求

处理重复请求：没有响应完成的请求，再去请求一个相同的请求，会把之前的请求取消掉

新增一个cancelRequest.js文件

1. import axios from "axios"
2. const cancelTokens = {}
4. export const addPending = (config) => {
5.     const requestKey = getRequestKey(config)
6.     if (cancelTokens[requestKey]) {
7.         cancelTokens[requestKey].cancel('cancel request')
8.     }
9.     const source = axios.CancelToken.source()
10.     cancelTokens[requestKey] = source
11.     config.cancelToken = source.token
12. }
14. export const deletePending = (res) => {
15.     const requestKey = getRequestKey(res.config)
16.     if (cancelTokens[requestKey]) {
17.         delete cancelTokens[requestKey]
18.     }
19. }
21. const getRequestKey = (config = {}) => {
22.     return config.url + config.method + JSON.stringify(config.params, config.data)
23. }

复制代码

request.js

1. import axios from "axios"
2. import { baseUrl } from "@/config"
3. import { addPending, deletePending } from "./cancelRequest"
4. const service = axios.create({
5.     baseURL: baseUrl,
6.     timeout: 100000,
7. })
8. service.interceptors.request.use(
9.     config => {
10.         addPending(config)
11.         return config
12.     },
13.     error => {
14.         return Promise.error(error)
15.     }
16. )
18. service.interceptors.response.use(
19.     success => {
20.         deletePending(success)
21.     },
22.     error => {
23.         deletePending(error)
24.     }
25. )
27. export default service

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。