【接口重复哀求】axios通过AbortController解决页面切换过快，接口重复哀求 ...

处置惩罚网络哀求时，我们常常会遇到必要中途取消哀求的环境，比如用户在两个tab之间反复横跳的场景，假如每个接口都从头哀求到结束，那一定会造成很大的服务压力。
AbortController是一个Web API，它提供了一个信号对象（AbortSignal），该对象可以用来取消与Fetch API相干的操作。当我们创建AbortController实例时，会主动生成一个与之关联的AbortSignal对象。我们可以将这个AbortSignal对象作为参数转达给fetch函数，从而实现对网络哀求的取消控制。

1. import axios from 'axios'
2. import QS from 'qs'//引入qs模块，用来序列化post类型的数据
4. // 创建map存储未返回response的接口请求
5. const pendingRequests = new Map();
7. const generateRequestKey = (config) => {
8.     // 处理请求数据，确保请求和响应时一致,response返回的config中可能存在序列化的data，需要转换成json格式，否则生成的key不一致
9.     const normalizeData = (data) => {
10.       if (typeof data === 'string') {
11.         try {
12.           return JSON.parse(data);
13.         } catch {
14.           return data;
15.         }
16.       }
17.       return data;
18.     };
19.    
20.     return [
21.       config.method,
22.       config.url,
23.       JSON.stringify(normalizeData(config.params) || {}),
24.       JSON.stringify(normalizeData(config.data) || {})
25.     ].join('|');
26.   };
28. axios.defaults.baseURL = '/';
29. axios.defaults.timeout = 10000;
30. axios.defaults.headers.post['Content-Type'] = 'application/json';
31. // 如果需要跨域，可以设置withCredentials为true
32. axios.defaults.withCredentials = true; // 允许跨域请求时发送cookies
35. // 创建axios实例
36. const service = axios.create({
37.     baseURL: '/api', // api的base_url
38.     timeout: 10000,// 请求超时时间
39.     headers: {
40.         'Access-Control-Allow-Origin': '*',
41.         'strict-origin-when-cross-origin': '*',
42.         'Cache-Control': 'no-cache',
43.         'Content-Type': 'application/x-www-form-urlencoded',
44.         'userRole': 'WEB',
45.         'Accept-Language': i18n.locale || localStorage.getItem('Accept-Language')
46.     }
47. });
49. // 请求拦截器
50. service.interceptors.request.use(config => {
51.     config.headers['nh-token'] = localStorage.getItem('NH_TOKEN') || ""
52.     const token = localStorage.getItem('newToken') || ""
53.     if (token) config.headers['Authorization'] = 'Bearer ' + token // 新服务添加token
54.    
55.     // 生成请求key，用于取消重复的相同请求
56.     const requestKey = generateRequestKey(config, 'service.interceptors.request');
57.     // 如果存在相同请求，取消前一个
58.     if (pendingRequests.has(requestKey)) {
59.         const abortController = pendingRequests.get(requestKey);
60.         abortController.abort();
61.     }
62.    
63.     // 为当前请求创建新的控制器
64.     const controller = new AbortController();
65.     config.signal = controller.signal;
66.     pendingRequests.set(requestKey, controller);
67.    
68.     return config;
69. },
70.     error => {
71.         return Promise.error(error);
72.     })
73. // 响应拦截器
74. service.interceptors.response.use(
75.     response => {
76.         const requestKey = generateRequestKey(response.config, 'service.interceptors.response');
77.         pendingRequests.delete(requestKey);
78.         // console.log('Response=>', response.request.responseURL, response  );
79.         if (response.status === 200) {
80.             //result  0-正常  1-异常  10000-未登录 4000-系统异常
81.             if (response.data.result == 10000) {
82.                 // 登录失败，跳转到首页，重新登录
83.                 router.push({ path: '/login' })
84.                 return Promise.resolve(response.data)
85.             } else {
86.                 return Promise.resolve(response.data)
87.             }
88.         } else {
89.             return Promise.reject(response);
90.         }
91.     },
92.     error => {
93.         if (error.name === 'AbortError') {
94.             console.log('请求已被取消:', error.message);
95.         }
96.         // 取消请求时，不执行这里的代码
97.         const requestKey = generateRequestKey(error.config || {});
98.         pendingRequests.delete(requestKey);
99.         if (error.status) {
100.             return Promise.reject(error.response);
101.         }
102.     })
103. export default service

复制代码

在接口封装层按照如上进行，可以满足接口重复哀求时，取消重复的操作。必要留意一点，config.data，从request层获取的是Object，但是从response层获取的是一个JSON化的String。以是通过normalizeData方法，进行数据解析，防止map找不到。

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