axios进阶——取消已经发出去的请求

首先,引入取消已经发出去的请求的必要性:

  1. 防止重复请求:当用户快速连续触发同一操作(比如多次点击按钮发送同一个请求),这个函数可以确保只有最后一个请求被执行,之前的相同请求会被取消,从而避免了因重复请求导致的数据不一致或服务器压力。

  2. 优化性能和体验 :通过维护一个待处理请求的映射表(pendingMap),可以有效管理网络请求队列,特别是在用户交互频繁的应用中,有助于提升应用响应速度和用户体验。

  3. 资源管理:及时取消不再需要的HTTP请求可以释放浏览器或应用的资源,尤其是在移动端或网络环境不稳定的情况下,有助于节省数据流量和电池使用。

解决方案:CancelToken是axios库提供的一种机制,允许你取消已发出但尚未完成的HTTP请求。

具体用法:

javascript 复制代码
axios.CancelToken((cancel) => {
        cancel()
});

封装进入axios中,大体思路为:

  1. 构建一个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);
相关推荐
Json_1817901448022 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
m51271 小时前
LinuxC语言
java·服务器·前端