Axios取消哀求：AbortController

AbortController

   AbortController() 构造函数创建了一个新的 AbortController 实例。MDN官网给出了一个利用AbortController取消下载视频的例子。
         核心逻辑是：利用AbortController接口的只读属性signal标记fetch哀求；然后在需要取消哀求的时候，调用AbortController接口的abort()方法立即取消哀求，并抛出一个错误AbortError。

1. const controller = new AbortController();
2. const signal = controller.signal;
4. const url = "video.mp4";
5. const downloadBtn = document.querySelector(".download");
6. const abortBtn = document.querySelector(".abort");
8. downloadBtn.addEventListener("click", fetchVideo);
10. abortBtn.addEventListener("click", () => {
11.   controller.abort();
12.   console.log("Download aborted");
13. });
15. function fetchVideo() {
16.   fetch(url, { signal })
17.     .then((response) => {
18.       console.log("Download complete", response);
19.     })
20.     .catch((err) => {
21.       console.error(`Download error: ${err.message}`);
22.     });
23. }

复制代码

只读属性signal

        AbortController接口的只读属性 signal 返回一个 AbortSignal 实例对象，该对象可以根据需要处理 DOM 哀求通讯，既可以创建通讯，也可以终止通讯。
方法:abort()

        AbortController接口的 abort() 方法会在 DOM 哀求完成之前中止它。它可以或许中止 fetch 哀求、各种响应主体或者流的消耗。
取消Axios哀求

   既然 AbortController接口的 abort() 方法可以终止fetch哀求、各种响应主体或者流的消耗，那么我们思量将其和axios联合，来取消axios的哀求。
          查看axios官网，也给出了干系先容：

        为了便于在项目中利用，我们在对其举行一个简朴的封装，示比方下：

1. //axios配置
2.         function createRequest() {
3.             const request = axios.create({
4.                 baseURL: "https://geo.datav.aliyun.com",
5.                 headers: {
6.                     "Content-Type": "application/json;charset=utf-8",
7.                 }
8.             })
10.             const cachePool = new Map()
12.             const encode = (baseURL, method, url, params) => {
13.                 const str = `${baseURL}_${url}_${method}_${JSON.stringify(params || {})}`;
14.                 const encoder = new TextEncoder();
15.                 //接受一个字符串作为输入，返回一个包含 UTF-8 编码的文本的 Uint8Array
16.                 const bytes = encoder.encode(str)
17.                 //使用Base64编码算法进行编码:将一个二进制字符串（例如，将字符串中的每一个字节都视为一个二进制数据字节）编码为 Base64 编码的 ASCII 字符串
18.                 const encoded = btoa(String.fromCharCode(...bytes))
19.                 return encoded
20.             }
22.             /**
23.              * 对Axios请求实例的config进行编码
24.              * */
25.             const configEncode = (config) => {
26.                 //获取基本信息
27.                 const baseURL = config.baseURL,
28.                     method = config.method,
29.                     url = config.url,
30.                     params = config?.params || config?.data || {};
31.                 //返回编码结果
32.                 return encode(baseURL, method, url, params);
33.             }
35.             //请求拦截器
36.             request.interceptors.request.use(
37.                 (config) => {
38.                     // 在发送请求之前做些什么
39.                     console.log(config)
40.                     const controller = new AbortController()
41.                     config.signal = controller.signal
42.                     //根据config配置信息进行编码
43.                     const encodeKey = configEncode(config)
44.                     console.log("encodeKey:", encodeKey)
45.                     //判断请求是否存在
46.                     if (cachePool.get(encodeKey)) {
47.                         controller.abort()
48.                         console.log('cachePool--cancel:', cachePool)
49.                     } else {
50.                         cachePool.set(encodeKey, { abort: controller })
51.                         console.log('cachePool--set:', cachePool)
52.                     }
53.                     return config;
54.                 },
55.                 (error) => {
56.                     // 对请求错误做些什么
57.                     console.log(error);
58.                     return Promise.reject(error);
59.                 }
60.             );
62.             //响应拦截器
63.             // 添加响应拦截器
64.             request.interceptors.response.use(function (response) {
65.                 // 2xx 范围内的状态码都会触发该函数。
66.                 // 对响应数据做点什么
67.                 const encodeKey = configEncode(response.config)
68.                 console.log('response---:', response, encodeKey)
69.                 //缓存对象
70.                 const cacheItem = cachePool.get(encodeKey)
71.                 if (cacheItem) {
72.                     console.log("res-success:删除缓存对象")
73.                     cachePool.delete(encodeKey)
74.                 }
75.                 return response;
76.             }, function (error) {
77.                 // 超出 2xx 范围的状态码都会触发该函数。
78.                 // 对响应错误做点什么
79.                 console.log('axios-error:', error)
80.                 if (error.code === "ERR_CANCELED") {
81.                     //被取消的axios请求
82.                     console.warn(`被取消的重复请求~`)
83.                 } else {
84.                     //其它错误
85.                     return Promise.reject(error);
86.                 }
87.             });
89.             //返回
90.             return request
91.         }

复制代码

        接下来做个简朴的测试，

1.         const request = createRequest()
3.         const getData = () => {
4.             return request.get("/areas_v3/bound/420800_full.json", {
5.                 params: {
6.                     a: 1
7.                 }
8.             })
9.         }
11.         getData().then(result => {
12.             console.log(result)
13.         })
14.         getData().then(result => {
15.             console.log(result)
16.         })
17.         getData().then(result => {
18.             console.log(result)
19.         })

复制代码

        查看实行效果：一连发送了3次哀求，后两个被取消掉，终极只有一个哀求正常返回了哀求效果。

别的取消Axios哀求的方式

        参考：Vue：Axios前端拦截器_vue axios拦截器-CSDN博客


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