首先,引入取消已经发出去的请求的必要性:
-
防止重复请求:当用户快速连续触发同一操作(比如多次点击按钮发送同一个请求),这个函数可以确保只有最后一个请求被执行,之前的相同请求会被取消,从而避免了因重复请求导致的数据不一致或服务器压力。
-
优化性能和体验 :通过维护一个待处理请求的映射表(
pendingMap
),可以有效管理网络请求队列,特别是在用户交互频繁的应用中,有助于提升应用响应速度和用户体验。 -
资源管理:及时取消不再需要的HTTP请求可以释放浏览器或应用的资源,尤其是在移动端或网络环境不稳定的情况下,有助于节省数据流量和电池使用。
解决方案:CancelToken
是axios库提供的一种机制,允许你取消已发出但尚未完成的HTTP请求。
具体用法:
javascript
axios.CancelToken((cancel) => {
cancel()
});
封装进入axios中,大体思路为:
- 构建一个Map数据结构
2.每发送一个网络请求,就将该请求映射入Map结构中
3.存入前进行检查,如果存在该映射关系,将旧的请求cancel()取消掉,将新的映射存入
一、封装取消axios的类
TypeScript
let pendingMap = new Map<string, Canceler>();
export const getPendingUrl = (config: AxiosRequestConfig) => [config.method, config.url].join('&');
export class AxiosCanceler {
/**
* Add request
* @param {Object} config
*/
addPending(config: AxiosRequestConfig) {
// 取消相同的请求
this.removePending(config);
// 构造key
const url = getPendingUrl(config);
config.cancelToken =
config.cancelToken ||
new axios.CancelToken((cancel) => {
if (!pendingMap.has(url)) {
// If there is no current request in pending, add it
pendingMap.set(url, cancel);
}
});
}
/**
* @description: Clear all pending
*/
removeAllPending() {
pendingMap.forEach((cancel) => {
cancel && isFunction(cancel) && cancel();
});
pendingMap.clear();
}
/**
* Removal request
* @param {Object} config
*/
removePending(config: AxiosRequestConfig) {
const url = getPendingUrl(config);
if (pendingMap.has(url)) {
// If there is a current request identifier in pending,
// the current request needs to be cancelled and removed
const cancel = pendingMap.get(url);
cancel && cancel(url);
pendingMap.delete(url);
}
}
/**
* @description: reset
*/
reset(): void {
pendingMap = new Map<string, Canceler>();
}
}
二、封装axios(部分)
TypeScript
import { AxiosCanceler } from './axiosCancel';
this.axiosInstance = axios.create(options);
const axiosCanceler = new AxiosCanceler();
this.axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
axiosCanceler.addPending(config);
return config;
}, undefined);