FetchWrapper 类使用文档

概述：

FetchWrapper 是一个基于 fetch API 的封装类，用于简化网络请求操作，并提供默认选项、Content-Type 自动映射、错误处理和重试机制等功能。

构造函数

new FetchWrapper(baseURL, contentTypeMappings = {}, defaultOptions = {}, onError = console.error)

baseURL：基础 URL 字符串，所有相对路径的请求都会基于此 URL 进行拼接。
contentTypeMappings：对象，键为文件扩展名或通配符模式，值为对应的 Content-Type，当请求 URL 匹配时自动设置 Content-Type 头部。

defaultOptions：对象，定义了发起请求时的默认选项，例如：

{
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  },
  // 其他默认配置项...
}

onError：错误回调函数，当发生网络请求错误时触发，默认为 console.error。

主要方法

formatResponse(response, data)

formatResponse(response, data)

格式化响应对象和数据，返回一个统一格式的对象。

fetch(url, options = {})

async fetch(url, options = {})

发起 HTTP 请求，参数说明：
- url：请求 URL。
- options：覆盖默认选项的对象，可自定义请求方法、头部、请求体等信息。

getParseResponseHandler(contentType)

getParseResponseHandler(contentType)

根据响应内容类型（Content-Type）获取相应的解析器函数。

fetchWithRetry(url, options = {}, maxRetries = 3, retryDelayBaseMs = 1000)

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方法的便捷调用方法。

示例使用：

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模块中这样导入：

// 导入 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,
    };
}

4.1 KiB Raw Blame History Unescape Escape