Wretch快速上手指南：5分钟内构建你的第一个HTTP客户端 [特殊字符]

Wretch快速上手指南5分钟内构建你的第一个HTTP客户端 【免费下载链接】wretchA tiny wrapper built around fetch with an intuitive syntax. :candy:项目地址: https://gitcode.com/gh_mirrors/wr/wretchWretch是一个轻量级、现代化的HTTP客户端库它为原生fetch API提供了优雅的封装和增强功能。这个仅1.8KB大小的库让网络请求变得简单直观是替代传统fetch和axios的理想选择。无论你是前端开发新手还是经验丰富的工程师Wretch都能显著提升你的开发体验。为什么选择Wretch 相比原生fetchWretch提供了更简洁的API设计。原生fetch需要手动处理JSON解析、错误状态码检查和请求配置而Wretch将这些繁琐操作自动化让HTTP请求变得像编写普通函数调用一样简单。核心优势超轻量级- 核心仅1.8KB g-zipped直观语法- 链式API设计易于理解和使用不可变设计- 每次调用都创建新实例安全复用模块化扩展- 通过插件系统添加新功能跨平台支持- 兼容浏览器、Node.js、Deno和Bun类型安全- 完整的TypeScript支持快速安装与配置 ⚡安装Wretch使用npm或yarn快速安装Wretchnpm install wretch # 或 yarn add wretch # 或 pnpm add wretch基础使用示例让我们从最简单的GET请求开始import wretch from wretch; // 创建可复用的API客户端 const api wretch(https://jsonplaceholder.typicode.com); // 发送GET请求并自动解析JSON const post await api.get(/posts/1).json(); console.log(post.title); // sunt aut facere repellat...核心功能详解 1. 优雅的错误处理Wretch自动处理HTTP错误状态码无需手动检查await wretch(https://api.example.com/data) .get() .notFound(() console.log(资源不存在)) .unauthorized(() console.log(未授权访问)) .internalError(() console.log(服务器错误)) .json();2. 自动JSON序列化发送JSON数据时Wretch自动设置正确的Content-Type头// 自动序列化对象为JSON const newUser await wretch(https://api.example.com/users) .post({ name: John, email: johnexample.com }) .json();3. 链式配置Wretch的不可变设计让你可以安全地复用配置const authenticatedApi wretch(https://api.example.com) .auth(Bearer token123) .options({ mode: cors }) .headers({ X-API-Version: v1 }); // 后续请求都使用相同的认证和配置 const profile await authenticatedApi.get(/profile).json(); const posts await authenticatedApi.get(/posts).json();高级功能探索 插件系统Wretch的插件系统让你按需添加功能import FormDataAddon from wretch/addons/formData; import QueryStringAddon from wretch/addons/queryString; const api wretch(https://api.example.com) .addon([FormDataAddon, QueryStringAddon]); // 使用FormData上传文件 await api .formData({ file: fileInput.files[0] }) .post(/upload); // 构建查询字符串 const results await api .query({ page: 1, limit: 20, sort: desc }) .get(/search) .json();中间件支持中间件可以在请求前后执行自定义逻辑import { retry, dedupe } from wretch/middlewares; const resilientApi wretch(https://api.example.com) .middlewares([ retry({ maxAttempts: 3 }), // 自动重试 dedupe() // 请求去重 ]);进度跟踪监控文件上传/下载进度import ProgressAddon from wretch/addons/progress; await wretch(https://api.example.com/upload) .addon(ProgressAddon()) .formData({ file: largeFile }) .onUpload((loaded, total) { console.log(上传进度: ${(loaded/total*100).toFixed(0)}%); }) .post();实际应用场景 场景1REST API客户端// 创建完整的API客户端 const apiClient wretch(https://api.example.com/v1) .auth(Bearer token) .resolve(r r.json()) .catcher(401, async (error, req) { // Token过期刷新后重试 const newToken await refreshToken(); return req.auth(Bearer ${newToken}).fetch().json(); }); // 使用简洁的API const users await apiClient.get(/users); const newOrder await apiClient.post({ product: Book }, /orders);场景2文件上传带进度import FormDataAddon from wretch/addons/formData; import ProgressAddon from wretch/addons/progress; const uploadFile async (file) { return await wretch(https://api.example.com/upload) .addon([FormDataAddon, ProgressAddon()]) .formData({ file }) .onUpload((loaded, total) { updateProgressBar(loaded, total); }) .post() .json(); };场景3TypeScript集成interface User { id: number; name: string; email: string; } interface CreateUserDto { name: string; email: string; } // 完全类型安全的请求 const getUser async (id: number): PromiseUser { return await wretch(https://api.example.com) .get(/users/${id}) .jsonUser(); }; const createUser async (data: CreateUserDto): PromiseUser { return await wretch(https://api.example.com) .post(data, /users) .jsonUser(); };最佳实践建议 1. 创建可复用的API实例// api/config.js import wretch from wretch; export const api wretch(process.env.API_BASE_URL) .auth(Bearer ${localStorage.getItem(token)}) .options({ mode: cors, credentials: include }) .catcher(401, handleUnauthorized) .catcher(500, handleServerError);2. 统一错误处理// utils/api.js export const createApiClient (baseUrl) { return wretch(baseUrl) .customError(async (error, response) { const contentType response.headers.get(content-type); let errorData { message: Unknown error }; if (contentType?.includes(application/json)) { errorData await response.json(); } return { ...error, data: errorData, timestamp: new Date().toISOString() }; }); };3. 性能优化import { throttlingCache } from wretch/middlewares; // 添加请求缓存 const cachedApi wretch(https://api.example.com) .middlewares([ throttlingCache({ throttle: 1000, // 1秒内相同请求只发送一次 cache: new Map() // 自定义缓存实现 }) ]);常见问题解答 ❓Q: Wretch和axios有什么区别A: Wretch更轻量1.8KB vs 13KBAPI设计更现代完全基于Promise并且原生支持TypeScript。Q: 如何处理跨域请求A: Wretch完全兼容CORS只需在配置中设置正确的optionswretch(https://api.example.com) .options({ mode: cors, credentials: include })Q: 是否支持取消请求A: 是的通过AbortControllerimport AbortAddon from wretch/addons/abort; const [controller, request] wretch(https://api.example.com) .addon(AbortAddon()) .get() .controller(); // 稍后取消请求 controller.abort();总结 Wretch为现代JavaScript开发提供了一个优雅、轻量级的HTTP客户端解决方案。它的链式API设计让代码更易读错误处理更直观插件系统让功能扩展变得简单。无论你是构建小型项目还是大型应用Wretch都能显著提升你的开发效率。核心源码路径主入口文件src/index.ts核心实现src/core.ts插件系统src/addons/中间件src/middlewares/现在就开始使用Wretch体验更简洁、更强大的HTTP请求处理吧只需几分钟的配置你就能享受到更愉悦的开发体验。【免费下载链接】wretchA tiny wrapper built around fetch with an intuitive syntax. :candy:项目地址: https://gitcode.com/gh_mirrors/wr/wretch创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考