144 lines
4.1 KiB
Markdown
144 lines
4.1 KiB
Markdown
# FetchWrapper 类使用文档
|
||
|
||
**概述：**
|
||
|
||
`FetchWrapper` 是一个基于 `fetch API` 的封装类，用于简化网络请求操作，并提供默认选项、Content-Type 自动映射、错误处理和重试机制等功能。
|
||
|
||
## 构造函数
|
||
|
||
````javascript
|
||
new FetchWrapper(baseURL, contentTypeMappings = {}, defaultOptions = {}, onError = console.error)
|
||
````
|
||
|
||
- **baseURL**：基础 URL 字符串，所有相对路径的请求都会基于此 URL 进行拼接。
|
||
- **contentTypeMappings**：对象，键为文件扩展名或通配符模式，值为对应的 Content-Type，当请求 URL 匹配时自动设置 Content-Type 头部。
|
||
- **defaultOptions**：对象，定义了发起请求时的默认选项，例如：
|
||
|
||
````javascript
|
||
{
|
||
method: 'GET',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
// 其他默认配置项...
|
||
}
|
||
````
|
||
|
||
- **onError**：错误回调函数，当发生网络请求错误时触发，默认为 `console.error`。
|
||
|
||
## 主要方法
|
||
|
||
### formatResponse(response, data)
|
||
|
||
````javascript
|
||
formatResponse(response, data)
|
||
````
|
||
|
||
- 格式化响应对象和数据，返回一个统一格式的对象。
|
||
|
||
### fetch(url, options = {})
|
||
|
||
````javascript
|
||
async fetch(url, options = {})
|
||
````
|
||
|
||
- 发起 HTTP 请求，参数说明：
|
||
- **url**：请求 URL。
|
||
- **options**：覆盖默认选项的对象，可自定义请求方法、头部、请求体等信息。
|
||
|
||
### getParseResponseHandler(contentType)
|
||
|
||
````javascript
|
||
getParseResponseHandler(contentType)
|
||
````
|
||
|
||
- 根据响应内容类型（Content-Type）获取相应的解析器函数。
|
||
|
||
### fetchWithRetry(url, options = {}, maxRetries = 3, retryDelayBaseMs = 1000)
|
||
|
||
````javascript
|
||
async fetchWithRetry(url, options = {}, maxRetries = 3, retryDelayBaseMs = 1000)
|
||
````
|
||
|
||
- 发起带有重试机制的 HTTP 请求，在请求失败时会按照指数退避策略进行重试。
|
||
- **maxRetries**：最大重试次数，默认为3次。
|
||
- **retryDelayBaseMs**：首次重试延迟时间的基础单位，默认为1000毫秒。
|
||
|
||
### post(url, body, options = {})
|
||
|
||
### get(url, options = {})
|
||
|
||
### put(url, body, options = {})
|
||
|
||
### patch(url, body, options = {})
|
||
|
||
### delete(url, options = {})
|
||
|
||
这些是针对不同HTTP方法的便捷调用方法。
|
||
|
||
## 示例使用
|
||
|
||
```javascript
|
||
const wrapper = new FetchWrapper('https://api.example.com', {
|
||
'.json': 'application/json',
|
||
}, {
|
||
credentials: 'include',
|
||
});
|
||
|
||
async function fetchData() {
|
||
try {
|
||
const response = await wrapper.get('/data.json');
|
||
console.log(response.data);
|
||
} catch (error) {
|
||
wrapper.onError(error);
|
||
}
|
||
}
|
||
|
||
//使用带重试机制的 POST 请求
|
||
async function postDataWithRetry() {
|
||
const body = { key: 'value' };
|
||
const options = { headers: { 'X-Custom-Header': 'value' } };
|
||
|
||
try {
|
||
const response = await wrapper.fetchWithRetry('/post-data', { body }, 5, 2000);
|
||
console.log(response.data);
|
||
} catch (error) {
|
||
wrapper.onError(error);
|
||
}
|
||
}
|
||
````
|
||
|
||
以上JavaScript代码已用Markdown代码块包裹，可以直接复制并粘贴到您的项目中。通过创建一个 `FetchWrapper` 实例，您可以利用其便捷的方法来发起网络请求，并根据需要灵活定制请求选项以及实现重试功能。
|
||
|
||
当您在fetch-wrapper.js文件中使用export default class FetchWrapper {...}导出FetchWrapper类时，您可以在其他JavaScript模块中这样导入：
|
||
|
||
````javascript
|
||
// 导入 FetchWrapper 类
|
||
import FetchWrapper from './fetch-wrapper';
|
||
|
||
// 创建一个实例
|
||
const wrapper = new FetchWrapper('https://api.example.com', {}, { credentials: 'include' });
|
||
|
||
// 使用这个实例发起请求
|
||
async function fetchData() {
|
||
try {
|
||
const response = await wrapper.get('/data.json');
|
||
console.log(response.data);
|
||
} catch (error) {
|
||
wrapper.onError(error);
|
||
}
|
||
}
|
||
|
||
fetchData();
|
||
|
||
````
|
||
|
||
这里，./fetch-wrapper是相对路径，表示FetchWrapper类所在的模块位置。根据实际项目结构，您需要调整这个路径以便正确指向fetch-wrapper.js文件。
|
||
|
||
formatResponse(response, data) {
|
||
return {
|
||
status: response.status,
|
||
message: response.statusText,
|
||
data,
|
||
};
|
||
} |