diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000000000000000000000000000000000000..2fdb3e60b219b63095e94137b66255a6aee9c689 --- /dev/null +++ b/README.en.md @@ -0,0 +1,90 @@ +# Fetch Request Management Library + +## Introduction +This is a request management library based on Axios, providing features such as request queue management, interceptor configuration, and a unified request interface. It is suitable for frontend projects requiring efficient management of HTTP requests. + +## Features +- **Request Queue Management**: Supports operations such as adding, deleting, and aborting requests. +- **Interceptor Configuration**: Supports interception and processing of requests and responses. +- **Unified Request Interface**: Provides a unified `fetch` interface for initiating requests. + +## Core Components + +### RequestQueue +The `RequestQueue` class implements request queue management and supports the following features: +- Generate a unique identifier for requests (`createKey`). +- Add a request to the queue (`setQueue`). +- Delete a request from the queue (`deleteQueue`). +- Check if a specific request exists in the queue (`hasQueue`). +- Abort a specific request (`abortive`). +- Abort all requests and clear the queue (`removeResAll`). + +### Fetch +`fetch` is a request interface encapsulating Axios, supporting the following features: +- Configure default request parameters (`requestConfig`). +- Request interception processing (`requestIntercept`). +- Response interception processing (`responseIntercept`). + +## Usage Example + +### Initialize Fetch +```ts +import { createFetch } from '../axios/fetch'; + +const requestConfig = { + maxContentLength: 2000, + headers: { + "Accept-Language": "zh-CN", + "Content-Type": "application/json;charset=utf-8" + } +}; + +const requestIntercept = () => { + const onFulfilled = (config) => { + return config; + }; + const onRejected = (error) => { + return Promise.reject(error); + }; + return { onFulfilled, onRejected }; +}; + +const responseIntercept = () => { + const onFulfilled = (config) => { + return config; + }; + const onRejected = (error) => { + return Promise.reject(error); + }; + return { onFulfilled, onRejected }; +}; + +let fetch = createFetch({ requestConfig, requestIntercept, responseIntercept }); +``` + +### Use Fetch to Make a Request +```ts +fetch.get('/api/data') + .then(response => { + console.log(response.data); + }) + .catch(error => { + console.error(error); + }); +``` + +## Installation +Ensure Axios is installed in your project: +```bash +npm install axios +``` + +## Contribution Guide +Contributions are welcome! Please follow these steps: +1. Fork the project. +2. Create a new branch. +3. Submit your code changes. +4. Open a Pull Request. + +## License +This project is licensed under the MIT License. For details, please refer to the LICENSE file in the project. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000000000000000000000000000000000000..2c53567b88bac3941a57373eff686eb334b7b45e --- /dev/null +++ b/README.md @@ -0,0 +1,90 @@ +# Fetch 请求管理库 + +## 简介 +这是一个基于 Axios 的请求管理库,提供了请求队列管理、拦截器配置和统一的请求接口。适用于需要高效管理 HTTP 请求的前端项目。 + +## 功能特性 +- **请求队列管理**:支持请求的添加、删除、中断等操作。 +- **拦截器配置**:支持请求和响应的拦截处理。 +- **统一请求接口**:提供统一的 `fetch` 接口用于发起请求。 + +## 核心组件 + +### RequestQueue +`RequestQueue` 类实现了请求队列的管理,支持以下功能: +- 生成请求的唯一标识(`createKey`)。 +- 添加请求到队列(`setQueue`)。 +- 删除队列中的请求(`deleteQueue`)。 +- 判断队列中是否存在指定请求(`hasQueue`)。 +- 中断指定请求(`abortive`)。 +- 中断所有请求并清空队列(`removeResAll`)。 + +### Fetch +`fetch` 是一个封装了 Axios 的请求接口,支持以下功能: +- 配置默认请求参数(`requestConfig`)。 +- 请求拦截处理(`requestIntercept`)。 +- 响应拦截处理(`responseIntercept`)。 + +## 使用示例 + +### 初始化 Fetch +```ts +import { createFetch } from '../axios/fetch'; + +const requestConfig = { + maxContentLength: 2000, + headers: { + "Accept-Language": "zh-CN", + "Content-Type": "application/json;charset=utf-8" + } +}; + +const requestIntercept = () => { + const onFulfilled = (config) => { + return config; + }; + const onRejected = (error) => { + return Promise.reject(error); + }; + return { onFulfilled, onRejected }; +}; + +const responseIntercept = () => { + const onFulfilled = (config) => { + return config; + }; + const onRejected = (error) => { + return Promise.reject(error); + }; + return { onFulfilled, onRejected }; +}; + +let fetch = createFetch({ requestConfig, requestIntercept, responseIntercept }); +``` + +### 使用 Fetch 发起请求 +```ts +fetch.get('/api/data') + .then(response => { + console.log(response.data); + }) + .catch(error => { + console.error(error); + }); +``` + +## 安装 +请确保项目中已安装 Axios: +```bash +npm install axios +``` + +## 贡献指南 +欢迎贡献代码!请遵循以下步骤: +1. Fork 项目。 +2. 创建新分支。 +3. 提交代码更改。 +4. 发起 Pull Request。 + +## 许可证 +本项目采用 MIT 许可证。详情请查看项目中的 LICENSE 文件。 \ No newline at end of file