# 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, }; }