@done-coding/request-ofetch

@done-coding/request-ofetch 是基于 @done-coding/request-base 的 ofetch 请求封装，提供了统一的请求处理流程和错误处理机制。

安装

# 使用 npm
npm install @done-coding/request-ofetch ofetch

# 使用 yarn
yarn add @done-coding/request-ofetch ofetch

# 使用 pnpm
pnpm add @done-coding/request-ofetch ofetch

注意：如果项目中已经安装了 ofetch，可以跳过安装 ofetch 依赖。

使用方法

基础配置

import { ofetch } from 'ofetch';
import { createRequest } from '@done-coding/request-ofetch';

// 创建请求实例
const request = createRequest({
  basePath: 'https://api.example.com',
  timeout: 5000,
  // 必须传入 ofetch 实例
  Fetch: ofetch,
  // 业务数据处理函数
  getBusinessCode: (res) => res.data.code,
  getBusinessMsg: (res) => res.data.message,
  getBusinessData: (res) => res.data.data,
  // 业务成功状态码列表
  businessSuccessCodeList: [200],
  // 请求拦截器
  beforeRequest: (config) => {
    // 可以修改请求配置
    return config;
  },
  // 错误处理
  beforeError: (error, { apiConfig, extendConfig }) => {
    if (error.isBusinessError) {
      return {
        newError: error,
        canShowErrorToast: true
      };
    }
    return {
      newError: error,
      canShowErrorToast: true
    };
  }
});

// 发起请求
const response = await request({
  url: '/api/data',
  method: 'GET',
  params: { id: 1 }
});

高级配置

import { ofetch } from 'ofetch';
import { createRequest } from '@done-coding/request-ofetch';

// 创建 ofetch 实例
const ofetchInstance = ofetch.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 创建请求实例
const request = createRequest({
  basePath: 'https://api.example.com',
  timeout: 5000,
  // 必须传入 ofetch 实例
  ofetch: ofetchInstance,
  // 实例创建选项
  instanceCreateConfig: {
    // 可以传入 ofetch.create 的配置项
    headers: {
      'Authorization': 'Bearer token'
    }
  },
  // 业务数据处理函数
  getBusinessCode: (res) => res.code,
  getBusinessMsg: (res) => res.message,
  getBusinessData: (res) => res.data,
  // 业务成功状态码列表
  businessSuccessCodeList: [200],
  // 网络成功状态码列表
  networkSuccessCodeList: [200, 201, 202],
  // 请求拦截器
  beforeRequest: (config) => {
    // 可以修改请求配置
    return config;
  },
  // 错误处理
  beforeError: (error, { apiConfig, extendConfig }) => {
    if (error.isBusinessError) {
      return {
        newError: error,
        canShowErrorToast: true
      };
    }
    return {
      newError: error,
      canShowErrorToast: true
    };
  },
  // 错误提示
  showToast: (message) => {
    console.error(message);
  },
  // UI配置
  uiConfig: {
    errorToast: true
  },
  // 缓存配置
  cacheConfig: {
    useCache: true
  },
  // 缓存选项配置
  cache: {
    getKey: (config) => `${config.url}-${JSON.stringify(config.params)}`,
    setCache: async (key, data, config) => {
      // 实现缓存存储逻辑
      // data: 请求结果
      // config: 缓存配置
    },
    getCache: async (key) => {
      // 实现缓存获取逻辑
      return undefined;
    }
  }
});

// 发起请求
const response = await request({
  url: '/api/data',
  method: 'GET',
  params: { id: 1 },
  // 请求级别缓存配置
  cacheConfig: {
    useCache: true
  }
});

特性

• 🔄 统一的请求处理流程：基于 base 包的统一请求处理流程
• 📦 统一的数据结构：所有请求响应都会被统一处理，确保进入 then 的数据结构一致
• ✅ 自动的状态码处理：自动处理业务状态码，只有在成功状态下才会进入 then
• 🛡️ 统一的错误处理：所有错误都会被统一捕获和处理，进入 catch 的错误都是经过处理的
• 🔍 可预测的结果：保证请求结果的可预测性，减少重复的状态码判断
• 🔄 请求重试机制：支持请求失败后的自动重试
• 🧠 缓存支持：内置缓存机制，支持自定义缓存策略
• 🐛 调试支持：内置调试功能，支持详细的请求生命周期日志

开发

# 安装依赖
pnpm install

# 开发模式运行
pnpm dev

# 构建
pnpm build

# 测试
pnpm test

许可证

MIT