常用功能详解

awe-axios封装了一些常用的功能，包括：

• 请求重发（Retry）
• 防抖（Debounce）
• 节流（Throttle）

本文将详细介绍这些功能的配置及实现原理，并介绍它们的适用场景。

请求重发（Retry）

请求重发功能用于在请求失败时自动重试发起请求，提高接口调用的成功率，适用于如下场景：

• 网络请求偶尔失败的接口
• 非实时性要求的接口
• 对成功率要求较高的场景

基本使用

想要得到一个具有请求重发功能的接口十分简单，你只需要使用useRetry函数，并传入请求函数和配置项即可。如下所示：

@HttpApi({
  baseURL: 'http://localhost:3000/users/',
})
class UserApi {
  @Get({
    url: '/retry/:id',
  })
  getUserById(@PathParam('id') id: number): any {}
}
const userApi = new UserApi();
// 实际开发接口调用
async function getUserById(id: number) {
  const { data } = await userApi.getUserById(id);
}
// 装饰实际开发接口，得到具有请求重发功能的接口
const retryGetUserById = useRetry(getUserById);
await retryGetUserById(1);

默认值

当你使用useRetry包裹实际开发接口时，awe-axios会采设置默认的重试次数和基础延迟时间，其中：

• 重试次数默认为：3 次
• 基础延迟时间默认为：100ms

多种配置方式

上面的方式是最简单的，不需要提供任何配置项，awe-axios会以默认的配置项进行请求重发，但这并不一定能满足你的需求，所以awe-axios支持多种配置方式，你可以通过以下方式进行配置来满足你的项目需求：

仅指定重试次数

// 实际开发接口调用
async function getUserById(id: number) {
  const { data } = await userApi.getUserById(id);
}
// 重试3次，默认延迟时间依然为100ms
const retryGetUserById = useRetry(getUserById, 3);

完整配置

// 实际开发接口调用
async function getUserById(id: number) {
  const { data } = await userApi.getUserById(id);
}
// 重试3次，延迟时间为1s
const retryGetUserById = useRetry(getUserById, {
  count: 3, // 重试次数
  delay: 1000, // 基础延迟时间(ms)
});

数组形式 [次数, 延迟]

// 实际开发接口调用
async function getUserById(id: number) {
  const { data } = await userApi.getUserById(id);
}
// 重试3次，延迟时间为1s
const retryGetUserById = useRetry(getUserById, [3, 1000]);

重要特性

awe-axios的请求重发功能有如下重要特性：

• awe-axios采用指数退避策略：第 n 次重试的延迟时间为 delay * 2^(n-1)
• awe-axios不会对请求重发次数进行限制，且首次重试无延迟，从第二次开始应用延迟策略

请求幂等性与post请求

不推荐在Post请求中使用请求重发功能，因为Post请求一般不具有幂等性，重试可能会导致数据重复。

防抖（Debounce）

防抖功能用于限制短时间内多次触发的请求，只执行最后一次请求，适用于如下场景：

• 搜索框输入联想
• 窗口大小调整触发的请求
• 频繁点击按钮的场景

基本使用

想要得到一个具有防抖功能的接口也十分简单，和实现请求重发功能一样，你只需要使用useDebounce函数，并传入请求函数和配置项即可。如下所示：

@HttpApi({
  baseURL: 'http://localhost:3000/users/',
})
class UserApi {
  @Get({
    url: '/debounce/:id',
  })
  getUserById(@PathParam('id') id: number): any {}
}
const userApi = new UserApi();
// 实际开发接口调用
async function getUserById(id: number) {
  const { data } = await userApi.getUserById(id);
  console.log(data);
}
// 装饰实际开发接口，得到具有防抖功能的接口
const fn = useDebounce(getUserById);
// 下面实际执行一次请求
fn(1);
fn(2);
fn(3);
fn(4);
fn(5);

默认值

当你使用useDebounce包裹实际开发接口时，awe-axios会设置默认的延迟时间和是否立即执行：

• 默认延迟时间为：100ms
• 是否立即执行：false

多种配置方式

useDebounce同样支持多种配置方式，你可以通过以下方式进行配置来满足你的项目需求：

仅指定延迟时间(ms)

// 实际开发接口调用
async function getUserById(id: number) {
  const { data } = await userApi.getUserById(id);
  console.log(data);
}
// 300ms内多次调用只执行最后一次
const fn = useDebounce(getUserById, 300);

是否立即执行一次

// 实际开发接口调用
async function getUserById(id: number) {
  const { data } = await userApi.getUserById(id);
  console.log(data);
}
// 300ms内多次调用只执行最后一次
// 立即执行第一次请求
const fn = useDebounce(getUserById, {
  delay: 300, // 延迟时间
  immediate: true, // 是否立即执行第一次请求
});

节流（Throttle）

节流功能用于限制请求的执行频率，确保在指定时间间隔内只执行一次，适用于持续触发的场景：

• 滚动加载更多数据
• 拖拽操作触发的请求
• 实时数据刷新（如仪表盘）

基本使用

与重发和防抖功能类似，想要得到一个具有节流功能的接口也十分简单，你只需要使用useThrottle函数，并传入请求函数和配置项即可。如下所示：

@HttpApi({
  baseURL: 'http://localhost:3000/users/',
})
class UserApi {
  @Get({
    url: '/throttle/:id',
  })
  getUserById(@PathParam('id') id: number): any {}
}
const userApi = new UserApi();
// 真实接口调用
async function getUserById(id: number) {
  const { data } = await userApi.getUserById(id);
  console.log(data);
}
// 节流函数
const fn = useThrottle(getUserById, true);
// 默认100ms的执行间隔，所以下面实际调用3次接口
fn(1);
fn(2);
await delay(100);
fn(3);
fn(4);
await delay(100);
fn(5);
fn(6);

默认值

当你使用useThrottle包裹实际开发接口时，awe-axios会设置默认的间隔时间：100ms

其它配置方式

你可以通过配置直接指定你需要的节流间隔时间：

// 真实接口调用
async function getUserById(id: number) {
  const { data } = await userApi.getUserById(id);
  console.log(data);
}
// 1秒内最多执行一次
const fn = useThrottle(getUserById, 1000);

多种功能组合

awe-axios支持多种功能组合，比如你的接口可以即具有防抖功能，又请求重发功能，或者即具有节流功能，又请求重发功能，你可以根据你的项目需求选择合适的组合。使用方法也很简单，如下所示：

// 真实接口调用
async function getUserById(id: number) {
  const { data } = await userApi.getUserById(id);
  console.log(data);
}
// 节流+重试函数
const fn = useThrottle(useRetry(getUserById));

装饰器模式

从本质来讲awe-axios采用了装饰器模式来实现请求功能的增强，外层请求函数包裹内层请求函数一层包裹一层（就像套娃一样），最终返回一个新的请求函数，然后利用这个新的请求函数发起请求。

注意事项

awe-axios不推荐防抖与节流不能同时使用，因为这两个功能的实现方式是互相冲突的，可能会导致请求失败。
推荐组合如下

• 搜索场景：防抖 + 重传
• 滚动加载：节流 + 重传
• 普通接口：仅重传（大多数场景）

这些组合既能保证用户体验，又能提高请求成功率，同时避免策略冲突。