利用网络层进行防抖，取消重复请求

利用网络层进行防抖，取消重复请求

很多情况下我们都是通过函数防抖去优化c端的请求，但最近自己在研究怎么做一个有防抖、重连、数据处理等完整功能，且能满足三种数据格式（content-Type）的网络请求封装（这个雏形基本写完了，是基于类的封装，后面更新）。这边我基于类去封装了一个取消重复请求类**（网络防抖），这里没用canceler***,因为在v0.22.0后面的版本这个api被弃用了，我这边用的是fetch api里的*AbortController。

功能描述：

全局定义一个队列，存储pending状态（没有response）的请求，在请求拦截器中给每个需要防抖的请求加一个signal（信标），每个请求进来的同时去判断当前等待队列中是否有相同的请求，如果有就取消队列中的请求，加入最新的请求的信标（这个逻辑也可以改成取消当前请求，保留队列中的请求的信标，这个主要看你的业务需求，一般c端都是需要最新数据，所以我使用的是前面的逻辑），如果没有当前的信标加入队列中；在响应拦截器里，删除队列中的请求signal。

import type { AxiosRequestConfig } from 'axios';

// 用于存储请求等待队列
let pendingMap = new Map<string, AbortController>();
// 生成map的key值（get&api形式）
export const getPendingUrl = (config: AxiosRequestConfig) => [config.method, config.url].join('&');

export class AxiosCanceler {
  /**
   * 新增请求
   * @param {Object} config
   */
  addPending(config: AxiosRequestConfig) {
    this.removePending(config);
    const url = getPendingUrl(config);
    const controller = new AbortController()
    config.signal = 
        config.signal ||
        controller.signal
    if (!pendingMap.has(url)) {
        // 队列中没有就加入队列
        pendingMap.set(url, controller);
    }
  }

  /**
   * @description: 清除所有请求
   */
  removeAllPending() {
    pendingMap.forEach((cancel) => {
      cancel  && cancel.abort();
    });
    pendingMap.clear();
  }

  /**
   * 清除目标请求
   * @param {Object} config
   */
  removePending(config: AxiosRequestConfig) {
    const url = getPendingUrl(config);

    if (pendingMap.has(url)) {
      //   取消在等待队列中的请求
      const cancel = pendingMap.get(url);
      cancel && cancel.abort();
      pendingMap.delete(url);
    }
  }

  /**
   * @description: 重置
   */
  reset(): void {
    pendingMap = new Map<string, AbortController>();
  }
}