# sluggard-http

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

Latest version **1.3.4** (published 2024-05-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install sluggard-http
pnpm add sluggard-http
yarn add sluggard-http
bun add sluggard-http
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.4 |
| Published | 2024-05-15 |
| First published | 2023-10-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 169 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wrhan |
| Maintainers | wrhan |
| Keywords | axios, http, sluggard, abort, pending, request, response |

## Links

- npm: https://www.npmjs.com/package/sluggard-http
- npm.io page: https://npm.io/package/sluggard-http

## Dependencies (2)

- [axios](https://npm.io/package/axios.md) ^1.6.0
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21

## Alternatives

- [launchdarkly-js-client-sdk](https://npm.io/package/launchdarkly-js-client-sdk.md) — 2.5M weekly downloads
- [@elastic/elasticsearch](https://npm.io/package/@elastic/elasticsearch.md) — 2.1M weekly downloads
- [@c8y/client](https://npm.io/package/@c8y/client.md) — 15.3K weekly downloads
- [@signaldb/maverickjs](https://npm.io/package/@signaldb/maverickjs.md) — 1.7K weekly downloads
- [@bbc/http-transport-cache](https://npm.io/package/@bbc/http-transport-cache.md) — 1.2K weekly downloads

## Recent versions

- 1.3.4 (latest) — 2024-05-15
- 1.3.3 — 2024-04-02
- 1.3.2 — 2024-04-02
- 1.3.1 — 2024-04-01
- 1.3.0 — 2024-04-01
- 1.2.5 — 2024-01-25
- 1.2.4 — 2024-01-25
- 1.2.3 — 2024-01-25
- 1.2.2 — 2024-01-24
- 1.2.1 — 2024-01-24
- 1.2.0 — 2024-01-24
- 1.1.8 — 2024-01-23
- 1.1.7 — 2024-01-23
- 1.1.6 — 2023-12-29
- 1.1.5 — 2023-12-29
- … 15 more at https://npm.io/package/sluggard-http/versions

## README

# sluggard-http

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

## 文档地址 👇

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

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

## 快速开始

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

```TS
// 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'`

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

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

- [查看完整示例](https://www.wem3.cn/sluggard/sluggard-http/function.html#示例-修改请求体的别名)

### e.g. 新增 `data` 别名

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

```TS
// 配置
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)
```

- [查看完整示例](https://www.wem3.cn/sluggard/sluggard-http/function.html#示例-修改响应体的别名)

### e.g. 重构 `post` 别名

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

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

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

- [查看完整示例](https://www.wem3.cn/sluggard/sluggard-http/function.html#示例-重构原有请求别名)

## 内置功能 - 多种请求控制

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

### 请求更新

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

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

- [查看完整示例](https://www.wem3.cn/sluggard/sluggard-http/function.html#请求更新)

### 全局请求清除

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

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

- [查看完整示例](https://www.wem3.cn/sluggard/sluggard-http/function.html#全局请求清除)

### 请求拦截

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

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

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

- [查看完整示例](https://www.wem3.cn/sluggard/sluggard-http/function.html#请求拦截)

## 内置功能 - 进度生命周期

> sluggard-http 支持在`单个请求开始`/`全部请求结束`时抛出钩子函数 <br/>
> 常与 [`NProgress`](https://www.npmjs.com/package/nprogress) 等进度条插件配合使用

```TS
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()
      },
    },
  }
)
```

## API文档

[点击查看API文档](https://www.wem3.cn/sluggard/sluggard-http/API.html)

---
_Source: https://npm.io/package/sluggard-http · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._