ofetch 教程：更好的 Fetch API 使用指南

1. 项目介绍

ofetch 是一个强大的替代原生 fetch API 的工具，它在Node.js、浏览器和Web Workers中都能工作。此库提供了额外的功能，如自动JSON解析、错误处理、超时设置、重试机制以及对二进制响应的支持。通过优化的API设计，使得开发者能够更便捷地进行网络请求。

2. 项目快速启动

安装

首先，使用npm或yarn安装 ofetch：

# npm
npm install ofetch

# yarn
yarn add ofetch

使用示例

导入并开始使用 ofetch 进行HTTP请求：

// ESM / TypeScript
import { ofetch } from 'ofetch';

// CommonJS
const { ofetch } = require('ofetch');

// 发起GET请求
const [ response ] = await ofetch('/api/data');
const data = await response.json();
console.log(data);

3. 应用案例和最佳实践

处理错误

当响应状态不是ok(即非2xx的状态码)时，ofetch 会自动抛出错误，包括友好的错误消息和简洁的堆栈信息:

try {
  const [ response ] = await ofetch('https://example.com/not-found');
} catch (error) {
  console.error(error.message); // 输出错误信息
  if (error.data) console.error(error.data); // 可以访问错误体数据
}

自动JSON序列化

传递对象到 body 选项，ofetch 将自动将其转换为JSON并设置正确的Content-Type头：

const [ user ] = await ofetch('/api/user', {
  method: 'POST',
  body: { name: 'Alice' },
});

设置超时

你可以指定超时时间（单位为毫秒），当请求超过这个时间未完成时，将自动取消请求：

await ofetch('https://example.com/slow-api', {
  timeout: 3000, // 超时3秒
});

4. 典型生态项目

ofetch 非常适合结合其他前端框架和库使用，例如：

• React: 用于获取API数据来驱动组件的状态。
• Vite: 在构建工具中集成，提高开发环境的数据模拟速度。
• Jest/Testing Library: 测试应用中的网络请求逻辑。

此外，配合流行的库如axios、graphql-request和redux-thunk，可以进一步扩展你的应用程序功能。

---

以上就是关于 ofetch 的简单介绍和使用指南，更多高级特性和配置，可查阅其官方文档以获得详细信息。祝你在使用过程中体验愉快，编程顺利！