封装axios

此方法用于前端开发web项目的接口请求使用。提供了两种实现方式：class和函数。

封装功能包括：

• 自定义登出逻辑；
• 自动重试逻辑：添加重试策略；
• 自动取消重复请求逻辑【生成请求唯一标识（URL + 请求方法）】；
• 递增延迟/指数退避算法 + 随机抖动算法：分散重试时间、减轻服务器压力、避免服务器过载、提高成功率；
• 错误处理：网络错误、超时错误、重试错误等；

安装

    npm i @yh-kit/axios

使用方式

class实现

方式一：使用默认实例（默认登出逻辑）

import { HttpRequest } from "@yh-kit/axios";

// 测试重试：网络错误，默认重试3次
httpRequest.request("http://localhost:9999/api/getUserInfo", {
  method: "GET"
});

方式二：创建自定义实例

import { customHttpRequest } from "@yh-kit/axios";

// 测试自定义实例：自定义登出逻辑
const customHttpRequest = createHttpRequest({
  baseURL: "/api",
  timeout: 10000,
  logouthandle: () => {
    console.log("自定义登出");
    localStorage.removeItem("token");
    window.location.href = "/login";
  }
});

调用请求方式1：直接调用自定义实例的 request 方法 【推荐】

customHttpRequest.request("http://localhost:9999/api/getUserInfo", {
  method: "GET"
});

调用请求方式2：使用 bind 绑定 this 指向自定义实例：要不然会报错，this 丢失 【推荐】

const http = customHttpRequest.request.bind(customHttpRequest);

http("http://localhost:9999/api/getUserInfo", {
  method: "GET"
});

调用请求方式3：使用箭头函数 【不推荐，也不反对】

import { customHttpRequest, ICustomRequestConfig } from "@yh-kit/axios";

const http = (url: string, config: ICustomRequestConfig) => customHttpRequest.request(url, config);

http("http://localhost:9999/api/getUserInfo", {
  method: "GET"
});

函数实现

方式一：使用默认请求函数（默认登出逻辑，默认基础URL，默认超时时间）

import { request } from "@yh-kit/axios";

request("/api/getUserInfo", { method: "GET" });

方式二：使用自定义请求函数（自定义登出逻辑，自定义基础URL，自定义超时时间）

import { request, setLogoutHandle, setInstanceTimeout, setInstanceBaseURL } from "@yh-kit/axios";

// 设置自定义登出逻辑
setLogoutHandle(() => {
  console.log("自定义登出");
  localStorage.removeItem("token");
  window.location.href = "/login";
});

// 设置自定义基础URL
setInstanceBaseURL("/api");

// 设置自定义超时时间
setInstanceTimeout(5000);

// 测试重试逻辑: 重试5次
request("http://localhost:9999/api/getUserInfo", {
  method: "GET",
  __retryMax: 5
});

// 测试重试逻辑: 禁用重试
request("http://localhost:9999/api/getUserInfo1", {
  method: "GET",
  // __retryMax: 5,
  __noRetry: true
});