Sluggard-http NPM

sluggard-http

✨ 请确保项目已安装 axios 依赖

文档地址 👇

https://www.wem3.cn/sluggard/sluggard-http/

基于 axios 的多功能请求库，与 axios 使用方式完全兼容，并提供自定义请求别名功能与多种请求控制方法。

快速开始

使用 Http.create() ( 与 axios.create() 基本相同 ) 来创建实例
用法可参考 axios 文档 The Axios Instance
Http.create() 的第一个参数与 axios.create() 的 config 参数一致，第二个参数为 sluggard-http 自定义请求别名 和 进度生命周期 功能的配置项。

// import axios from 'axios'
import { Http } from 'sluggard-http'

// export const http = axios.create({
export const http = Http.create(
  {
    baseURL: '...',
    timeout: 1000,
    headers: {'Authorization': '...'}
  },
  // 新增配置项
  {
    // 自定义请求别名
    methodAlias: {
      download: {
        axiosMethod: 'post',
        handle: (url: string, data: any, config: RequestConfig) => {
          return [url, data, { ...config, responseType: 'blob' }]
        },
      },
    },
    // 进度生命周期
    life: {
      begin: () => {
        NProgress.start()
      },
      end: () => {
        NProgress.done()
      },
    },
  }
)

内置功能 - 自定义请求别名

支持添加自定义的请求别名或重构已有别名，用来对请求进行统一处理。

e.g. 新增 `download` 别名

新增一个 download 别名，使用此别名时调用 post 方法，并自动携带 responseType: 'blob'

// 配置
const methodAlias: MethodAlias = {
    download: {
        axiosMethod: 'post',
        handle: (url: string, data: any, config: RequestConfig) => {
            return [url, data, { ...config, responseType: 'blob' }]
        },
    },
}

// 使用
http.download(url, data, config)

查看完整示例

e.g. 新增 `data` 别名

新增一个 data 别名，使用此别名时调用 post 方法，并自动判断响应体中 code 字段是否为 200 ，是则直接返回响应体中的 data 字段数据

// 配置
const methodAlias: MethodAlias = {
    data: {
        axiosMethod: 'post',
        handle: (url: string, data: any, config: RequestConfig) => {
            return [url, data, { ...config, postType: "postData" }]
        },
    },
}
// 相应拦截
http.interceptorsResponseUse((response) => {
    if (
        response.config.postType === 'postData'
        && response.data.code === 200
    ){
        return response.data.data
    }
    return response
})

// 使用
http.data(url, data, config)

查看完整示例

e.g. 重构 `post` 别名

重构 axios 的 post 别名，增加 <清除请求体数据中 字符串类型字段 数据的前后空格> 的功能

// 配置
const methodAlias: MethodAlias = {
  post: {
    axiosMethod: 'post',
    handle: (url: string, data: any, config: RequestConfig) => {
      clearTrim(config)
      return [url, data, config]
    },
  },
}

// 使用
http.post(url, data, config)

查看完整示例

内置功能 - 多种请求控制

支持 请求更新、全局请求清除、请求拦截 功能

请求更新

在当前请求处于 进行中 时，若发起 相同 请求，则会触发请求更新， 取消 之前未完成的请求，避免重复请求

// 使用
export async function getList(data: any) {
    const httpRes = await http.post("/getList", data, {
        updateLevel: "path",
    });
    return httpRes;
}

查看完整示例

全局请求清除

清除并 取消 当前所有的请求，往往在 路由变化 时使用，避免请求资源的浪费

router.afterEach(() => {
    http.clearPending();
});

查看完整示例

请求拦截

对还在 进行中 的指定请求进行拦截，并 取消 请求

// 使用 拦截标识符 拦截请求
const { abortSignUuidCode } = http.post("/getList", { size: 10, current: 1 })
http.abortPending(abortSignUuidCode)

// 无法获取拦截标识符时的解决方案
http.abortPending(["post", "/getList", { size: 10, current: 1 }]);

查看完整示例

内置功能 - 进度生命周期

sluggard-http 支持在单个请求开始/全部请求结束时抛出钩子函数常与 NProgress 等进度条插件配合使用

import NProgress from "nprogress";
import { Http } from 'sluggard-http'

export const http = Http.create(
  {
    baseURL: '...',
    timeout: 1000,
    headers: {'Authorization': '...'}
  },
  {
    methodAlias: { ... },
    life: {
      begin: () => { // 有请求开始时触发
        NProgress.start()
      },
      end: () => { // 全部请求结束时触发
        NProgress.done()
      },
    },
  }
)