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

news/2025/1/18 16:50:02/
http://www.w3.org/2000/svg" style="display: none;">

问题描述&背景

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

问题分析

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

方案选择及具体实施

  1. 在前一个请求响应前，阻止发起下一个请求（问题中通过禁用选择框 disabled=true 实现），避免返回值覆盖
    • 实现方法
      • 接口请求时将组件的disabled和loading均设置为true
      • 返回后设置为false
    • 优点
      • 可以减少接口调用，防止返回值相互覆盖
    • 缺点
      • 禁用选择框会让其失去焦点，用户需要再次点击输入
      • 禁用状态的切换使得操作不连贯，用户有明显的感知，体验下降
      • 需要操作页面元素，需要额外代码
  2. 发送请求时，通过给每次请求添加一个序列号或时间戳，然后在处理响应时进行匹配，确保每次返回的结果与其对应
    • 实现方法
      • 发送请求时生成唯一的标识符（时间戳）
      • 处理响应时保存该标识符
      • 匹配标识符更新数据
    • 优点
      • 可以找出最新的请求赋值，保证数据为最后请求的
    • 缺点
      • 需要多次更新使用的数据
      • 需要生成标识并用额外的变量储存标识，逻辑改动较大
      • 没有实际减少或取消无效的请求，占用资源多
  3. 发起新的请求时取消尚未完成的请求 ⭐️
    • 运用技术
      • 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()}// 创建 cancelTokenthis.cancelToken = axios.CancelToken.source()this.loading = trueconst params = {...}const {data: { data },} = await this.$http.get('/api/v1/xxx'params,cancelToken: this.cancelToken.token, // 请求时传入token})// 数据处理...this.loading = false// 清除cancelTokenthis.cancelToken = null},300,{leading: false,trailing: true,}
),
  1. 使用第三方插件进行优化 ⭐️
    • 插件名称：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: numbermessage: stringdata: T | null | undefined}status: numberheaders?: Record<string, string>config?: anyrequest?: 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 = requestMethodthis.responseType = responseType}// 私有异步方法，用于执行 HTTP 请求，接受请求方法、URL 和配置private async createRequest<T>({method,url,config,}: {method: 'get' | 'post' | 'delete' | 'put'url: stringconfig: CustomAxiosRequestConfig}): HttpResult<T> {let source, cancelTokenIdif (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?: ResponseTypeinstanceId?: 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


http://www.ppmy.cn/news/1564193.html

相关文章

架构设计：微服务还是集群更适合？

架构设计：微服务还是集群更适合？

在现代软件开发中&#xff0c;微服务和集群是两种广泛应用的架构设计方案。随着系统需求的不断复杂化和规模的扩大&#xff0c;选择一种适合的架构对系统的性能、可维护性和扩展性至关重要。那么&#xff0c;在架构设计中&#xff0c;是选择微服务还是集群更适合&#xff1f;本…
阅读更多...
文件上传 分片上传

文件上传 分片上传

分片上传则是将一个大文件分割成多个小块分别上传&#xff0c;最后再由服务器合并成完整的文件。这种做法的好处是可以并行处理多个小文件&#xff0c;提高上传效率&#xff1b;同时&#xff0c;如果某一部分上传失败&#xff0c;只需要重传这一部分&#xff0c;不影响其他部分…
阅读更多...
c++领域展开第十三幕——类和对象（auto、范围for以及string类的初步讲解）超详细！！！！

c++领域展开第十三幕——类和对象（auto、范围for以及string类的初步讲解）超详细！！！！

文章目录 前言一、auto和范围for二、string类2.1 string类(了解)2.2 string类的常用接口说明2.2.1 string类对象的常见构造2.2.2 string类对象的容量操作 总结 前言 上篇博客我们了解了STL&#xff0c;今天我们来学习string类的一些初始内容&#xff0c;另外&#xff0c;在stri…
阅读更多...
【深度学习】Pytorch：自实现残差网络

【深度学习】Pytorch：自实现残差网络

ResNet&#xff08;残差网络&#xff09;是由何凯明等人在2015年发表的论文《深度残差学习用于图像识别》中提出的一种开创性深度学习架构。它在ILSVRC 2015分类任务中获胜&#xff0c;并解决了深度神经网络中的退化问题&#xff0c;使得训练数百甚至数千层的网络成为可能。 残…
阅读更多...
reac 后端接口返回二进制文件流前端导出文件

reac 后端接口返回二进制文件流前端导出文件

axios配置 在你的请求中加入 responseType:blob导出函数 export interface DownloadFileOptions {filename: string; //文件名称}/*** 下载二进制文件流* param data - 二进制数据* param options - 下载配置*/export const downloadBinaryFile1 (data: any, // 这里使用 a…
阅读更多...
3.数据库系统

3.数据库系统

3.1数据库的基本概念 3.1.1:数据库体系结构 3.1.1.1集中式数据库系统 数据是集中的 数据管理是集中的 数据库系统的素有功能(从形式的用户接口到DBMS核心)都集中在DBMS所在的计算机 3.1.1.2C/S结构 客户端负责数据表示服务服务器主要负责数据库服务 数据库系统分为前端和后端…
阅读更多...
D3.js及实例应用

D3.js及实例应用

文章目录 D3.jsd3.js 应用实例图标展示点击选择拖拉拽应用 D3.js D3.js是一个功能强大的JavaScript库&#xff0c;除了图标展示&#xff0c;还能实现多种类型的交互效果&#xff1a; 数据可视化交互 动态更新图表&#xff1a;根据用户操作&#xff08;如点击按钮、选择下拉菜…
阅读更多...
初学stm32 --- flash模仿eeprom

初学stm32 --- flash模仿eeprom

目录 STM32内部FLASH简介 内部FLASH构成&#xff08;F1&#xff09; FLASH读写过程&#xff08;F1&#xff09; 闪存的读取 闪存的写入 内部FLASH构成&#xff08;F4 / F7 / H7&#xff09; FLASH读写过程&#xff08;F4 / F7 / H7&#xff09; 闪存的读取 闪存的写入 …
阅读更多...
最新文章

Copyright @ 2022~2023