# http-control

**Repository Path**: Jokerdd/http-control

## Basic Information

- **Project Name**: http-control
- **Description**: http并发请求控制
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-29
- **Last Updated**: 2025-07-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# http-control 🚀

**智能 HTTP 请求控制库 | 并发管理 · 请求池优化 · Vue3 深度集成**

[![npm version](https://img.shields.io/npm/v/http-control.svg)](https://www.npmjs.com/package/http-control)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/yourname/http-control/blob/main/LICENSE)

---

## 特性亮点

- 🎯 **精准并发控制** - 控制并发数，防止http请求占满浏览器资源，使页面卡死
- 🛠 **多框架适配** - 原生支持 Vue3 插件化集成
- 📦 **轻量级** - 轻量级实现（核心代码 < 3KB）
- 🦾 **全类型支持** - 完整的 TypeScript 类型定义

---

## 安装

```bash
# NPM
npm install http-control

# Yarn
yarn add http-control

# PNPM
pnpm add http-control
```

---

## 快速上手

### 基础用法

```typescript
import HttpControl from 'http-control'

// 初始化实例（最大并发数=2）
const httpController = new HttpControl(2)

// 添加请求到队列
const task = [
  async () => fetch('https://api.example.com/data'),
  async () => fetch('https://api.example.com/data'),
]

const result = await httpController.addToPool(task)
  .catch(err => {
    console.error('请求失败:', err)
    return null
  })

// 或使用回调函数
httpController.addToPool(task, true, () => {
  console.log("请求完成")
})
```

### Vue3 集成

在vue中注入，可全局使用同一个并发池

```typescript
// main.ts
import { createApp } from 'vue'
import { useHttpControl } from 'http-control'

const app = createApp(App)
app.use(useHttpControl, 3) // 设置最大并发数为2

```

```vue
<!-- 组件内使用 -->
<script setup>
import { inject } from 'vue'

const $addToPool = inject('$addToPool')
await $addToPool(pros).catch((err:any) => {
  console.log('请求失败', err)
  return false
})
</script>
```

---

## 核心 API

### 构造函数

```typescript
new HttpControl(
  maxConcurrent: number,   // 最大并发数
  options?: {
    useReject?: boolean // 出错后是否停止剩余请求，默认true;为true时，全部成功返回成功结果数组，失败返回错误结果；为false时，返回包含成功和失败的数组
    timeout?: number       // 全局超时时间（默认 5000ms）
    retry?: number         // 失败重试次数（默认 1）
  }
)
```

### 实例方法

#### `addToPool(task: Array<() => Promise<any>>, cb?: (res: any) => void, config?): Promise<any>`

| 参数    | 类型                | 必填 | 说明                     |
|---------|---------------------|------|--------------------------|
| task    | `Array<() => Promise<any>>`  | 是   | 返回 Promise 的异步函数  |
| cb    | `(res: any) => void`  | 否   | 回调函数  |
| config  | `{}` | 否   | 任务级配置 |

**返回值**：原始 Promise 的代理对象，支持链式调用

---

## 高级配置

### Vue 插件选项

```typescript
app.use(httpControl, {
  poolSize: 3,                // 并发池容量
  injectKey: '$httpQueue'
})
```

---

## 最佳实践

### 文件分片上传

```typescript
async function uploadChunk(chunk: Blob) {
  return () => axios.post('/upload', chunk)
}

// 批量处理
const chunks = [/* 分片数组 */]
await httpController.addToPool(chunks.map(uploadChunk))
```

## 许可证

[MIT License](LICENSE) © 2024 Jokerator

---

> 提示：生产环境建议配合 axios/fetch 等 HTTP 客户端使用