Axios 封装：处理重复调用与内容覆盖问题

问题描述&背景

下拉选择框，支持搜索，搜索时携带参数调用接口并更新下拉选项
下拉选择连续进行多次搜索，先请求但响应时间长的返回值会覆盖后请求但响应时间短的
举例：
- 搜索后先清空选项，再输入内容进行搜索。清空后查询全量数据接口响应时间更长，覆盖搜索过滤后的数据

问题分析

连续多次请求导致问题
- 通过防抖debounce函数，限制短期内无法重复调用接口 - 使用 lodash 的 debounce 函数实现
- 若接口响应时间相差较大，仍会有覆盖问题，需要结合以下方法
接口响应慢导致问题
- 优化接口，如减少后端非必要属性的计算，提高响应速度 - 后端优化
接口调用重复问题
- 通过一些方法保证最后显示的数据为最晚发起的那个请求返回的值，方案见下文

方案选择及具体实施

在前一个请求响应前，阻止发起下一个请求（问题中通过禁用选择框 disabled=true 实现），避免返回值覆盖
- 实现方法
  - 接口请求时将组件的disabled和loading均设置为true
  - 返回后设置为false
- 优点
  - 可以减少接口调用，防止返回值相互覆盖
- 缺点
  - 禁用选择框会让其失去焦点，用户需要再次点击输入
  - 禁用状态的切换使得操作不连贯，用户有明显的感知，体验下降
  - 需要操作页面元素，需要额外代码
发送请求时，通过给每次请求添加一个序列号或时间戳，然后在处理响应时进行匹配，确保每次返回的结果与其对应
- 实现方法
  - 发送请求时生成唯一的标识符（时间戳）
  - 处理响应时保存该标识符
  - 匹配标识符更新数据
- 优点
  - 可以找出最新的请求赋值，保证数据为最后请求的
- 缺点
  - 需要多次更新使用的数据
  - 需要生成标识并用额外的变量储存标识，逻辑改动较大
  - 没有实际减少或取消无效的请求，占用资源多
发起新的请求时取消尚未完成的请求 ⭐️
- 运用技术
  - axios的取消请求：axios取消请求
  - 项目使用的axios版本为0.21.1，使用CancelToken
  - 更高版本使用AbortControllerAbortController：AbortController() 构造函数

AbortController实现方法

const controller = new AbortController();
const {
  data: { data },
} = await this.$http.get('/api/v1/xxx'
  params,
  signal: controller.signal
})
// 取消请求
controller.abort()

CancelToken实现方法

在data中定义cancelToken用于保存当前请求token

data() {
  return {
    ...
    cancelToken: null,
  }
},

在查询方法中进行如下配置

// 防抖
searchOptions: debounce(
  async function (searchString) {
    // 取消上一次的请求
    if (this.cancelToken) {
      this.cancelToken.cancel()
    }
    // 创建 cancelToken
    this.cancelToken = axios.CancelToken.source()
    this.loading = true
    const params = {...}
    const {
      data: { data },
    } = await this.$http.get('/api/v1/xxx'
      params,
      cancelToken: this.cancelToken.token, // 请求时传入token
    })
    // 数据处理...
    this.loading = false
    // 清除cancelToken
    this.cancelToken = null
  },
  300,
  {
    leading: false,
    trailing: true,
  }
),

使用第三方插件进行优化 ⭐️
- 插件名称：axios-extensions
- 功能：缓存请求结果，节流请求，请求重试
- 缓存请求：cacheAdapterEnhancer
  cacheAdapterEnhancer(axios.defaults.adapter, option)
  - option 对象，可选
    - enabledByDefault：是否默认缓存，Boolean类型，默认是true(缓存)， false(不缓存)
    - cacheFlag：是否通过flag方式缓存，字符串类型，只有flag一样才会缓存，flag不对或者没设置的都不会缓存。
    - defaultCache：可以配置maxAge（缓存有效时间, 毫秒单位），默认是5分钟，max（支持缓存的请求的最大个数），默认是100个
- 完整代码 🚀

import axios from 'axios'
import { Cache, cacheAdapterEnhancer } from 'axios-extensions'

const request = axios.create({
  baseURL: process.env.BASE_URL,
  adapter: cacheAdapterEnhancer(axios.defaults.adapter, {
    defaultCache: new Cache({ maxAge: 2000, max: 100 }),
  }),
})

扩展：
- 节流请求：throttleAdapterEnhancer
  throttleAdapterEnhancer(adapter, options)
  - option 对象，可选
    - threshold：限制请求调用的毫秒数，数字类型，默认是1000
    - cache：可以配置 max（节流请求的最大个数），默认是100个
- 请求重试：retryAdapterEnhancer
  retryAdapterEnhancer(adapter, options)
  - option 对象，可选
    - times：重试的次数，Number类型，默认是2，请求失败后会重试2次。

优化效果

杜绝先发起的请求结果覆盖旧发起的请求结果的情况
新的请求发起，取消当前进行中的请求，减少无用的请求调用
无需修改其他的业务逻辑，无需引入更多变量记录请求状态
用户没有感知，不会增加额外的用户操作

功能封装

封装一个基于 axios 的 HTTP 请求管理类：http.ts 🚀

import axios, { AxiosRequestConfig, CancelTokenSource } from 'axios'

// 引入请求函数 包含一些请求拦截器或其他设置
import { request } from './axiosConfig' 

// 枚举 指定响应数据的格式（这里只举例1种返回体格式）
enum ResponseType {
  ResData, // 返回 res.data
}
// 完整的响应对象结构
interface ApiResponse<T> {
  data: {
    code: number
    message: string
    data: T | null | undefined
  }
  status: number
  headers?: Record<string, string>
  config?: any
  request?: any
}
// 异步请求的结果
type HttpResult<T> = Promise<T | ApiResponse<T> | any> 

// 扩展了 Axios 的请求配置，添加了两个自定义字段以支持请求取消功能
interface CustomAxiosRequestConfig extends AxiosRequestConfig {
  cancelPrevious?: boolean // 是否取消之前的请求
  cancelTokenId?: string // 保存取消请求tokenId
}

class Http {
  // 存储 Http 类的实例，以便实现单例模式
  private static instancesMap: Map<string, Http> = new Map()
  // 存储与请求 URL 关联的取消令牌源，用于实现请求取消功能
  private static cancelTokenIdSourceMap: Map<string, CancelTokenSource> =
    new Map()
  private requestFunction: (config: AxiosRequestConfig) => Promise<any> // 请求方法
  private responseType: ResponseType = ResponseType.ResData // 相应数据格式类型

  // 构造函数-接收参数以配置请求函数、响应类型和公共URL前缀，同时初始化相关属性
  constructor({
    requestMethod = request,
    responseType = ResponseType.ResData,
  }: {
    requestMethod?: (config: AxiosRequestConfig) => Promise<any>
  }) {
    this.requestFunction = requestMethod
    this.responseType = responseType
  }
  // 私有异步方法，用于执行 HTTP 请求，接受请求方法、URL 和配置
  private async createRequest<T>({
    method,
    url,
    config,
  }: {
    method: 'get' | 'post' | 'delete' | 'put'
    url: string
    config: CustomAxiosRequestConfig
  }): HttpResult<T> {
    let source, cancelTokenId
    if (config?.cancelPrevious) {
      // 取消之前的请求
      cancelTokenId = config?.cancelTokenId ?? this.getCancelTokenId(url)
      this.cancelPreviousRequest(cancelTokenId)
      // 创建新的取消令牌
      source = axios.CancelToken.source()
    }

    // 准备请求配置
    const requestConfig: AxiosRequestConfig = {
      ...config,
      method,
      url,
      cancelToken: source?.token,
    }

    // 请求
    try {
      // 保存取消令牌
      if (cancelTokenId) Http.cancelTokenIdSourceMap.set(cancelTokenId, source)
      // 发起请求
      const res = await this.requestFunction(requestConfig)
      // 没有遇到重复请求-清空取消令牌
      if (cancelTokenId) Http.cancelTokenIdSourceMap.delete(cancelTokenId)
      // 返回响应值
      if (this.responseType === ResponseType.ResData) {
        return res.data as T
      } else {
        return res as ApiResponse<T>
      }
    } catch (error) { // 错误处理
      if (axios.isCancel(error)) {
        console.error('Request canceled', error.message)
      } else {
        if (cancelTokenId) Http.cancelTokenIdSourceMap.delete(cancelTokenId)
        console.error('Error:', error)
      }
      throw error
    }
  }

  private cancelPreviousRequest(cancelTokenId: string): void {
    const source = Http.cancelTokenIdSourceMap.get(cancelTokenId)
    source?.cancel(`Cancelled request ${cancelTokenId}`)
  }

  private getCancelTokenId(url: string): string {
    return url.split('?')[0] // 提取非 query 部分, 防止同一个get请求不同query时没取消
  }

  // 实现get方法
  public get<T>(
    url: string,
    config?: CustomAxiosRequestConfig
  ): HttpResult<T> {
    return this.createRequest<T>({ method: 'get', url, config })
  }

  // 实现post方法
  public post<T>(
    url: string,
    data?: any,
    config?: CustomAxiosRequestConfig
  ): HttpResult<T> {
    return this.createRequest<T>({
      method: 'post',
      url,
      config: { ...config, data },
    })
  }

  // 实现delete方法
  public delete<T>(
    url: string,
    config?: CustomAxiosRequestConfig
  ): HttpResult<T> {
    return this.createRequest<T>({ method: 'delete', url, config })
  }

  // 实现put方法
  public put<T>(
    url: string,
    data?: any,
    config?: CustomAxiosRequestConfig
  ): HttpResult<T> {
    return this.createRequest<T>({
      method: 'put',
      url,
      config: { ...config, data },
    })
  }

  // 单例
  // 该方法检查是否已经存在相同 ID 的实例，如果不存在，则创建一个新的实例并存储在 instancesMap 中。
  // 这样做的目的是减少同类实例的创建，确保在应用中使用的是同一个 Http 实例，从而管理配置和状态
  public static getInstance({
    requestMethod = request,
    responseType = ResponseType.ResData,
    instanceId = 'http',
  }: {
    requestMethod?: (config: AxiosRequestConfig) => Promise<any>
    responseType?: ResponseType
    instanceId?: string
  }): Http {
    let instance = Http.instancesMap.get(instanceId)
    if (!instance) {
      instance = new Http({ requestMethod, responseType })
      Http.instancesMap.set(instanceId, instance)
    }
    return instance
  }
}

// 导出实例
export const http = Http.getInstance({
  requestMethod: request,
  responseType: ResponseType.ResData,
  instanceId: 'http',
})

补充：

// Axios 请求实例
const request = axios.create({
  baseURL: process.env.BASE_URL,
  adapter: cacheAdapterEnhancer(axios.defaults.adapter, {
    defaultCache: new Cache({ maxAge: 2000, max: 100 }),
  }),
})

使用

await this.$http.post(
  `/xxx/xxx/${this.id}/xxx`,
  params
)

参考文档

来学习下axios的扩展插件1
来学习下axios的扩展插件2

Axios 封装：处理重复调用与内容覆盖问题

问题描述&背景

问题分析

方案选择及具体实施

优化效果

功能封装

参考文档

悦读