The Ultra-Lightweight HTTP Tool ‘wretch’: Simplifying API Requests in Just 3 Lines of Code for Frontend Developers!

📌 Summary

Tired of the cumbersome syntax of the fetch API? Today, we introduce the wretch framework, a lightweight HTTP client of only 7KB that can perform all request operations with the most elegant syntax! Whether for React/Vue projects or Node.js backends, complex request processes can be achieved in just 3 lines of code, making it the “Swiss Army Knife” for frontend development.

🌐 Getting to Know wretch

wretch (pronounced like “retch”) is a minimalist wrapper library based on fetch, with over 3.5k stars on GitHub. It retains all the capabilities of the native fetch while providing a more user-friendly chainable call:

// Traditional fetch vs wretch
fetch(url).then(r => r.json()) // Native
wretch(url).get().json()      // wretch magic!

[Project Address] 👉 https://github.com/elbywan/wretch (Recommended to star and bookmark, all examples in this article are based on version 3.x)

Applicable Scenarios:

• • Frontend projects that need to streamline HTTP request code
• • Rapid prototyping
• • Replacing heavy libraries like axios/request

🚀 Core Features Overview

1. Chain Your Requests

wretch("/api")
  .query({ limit: 10 })     // Add query parameters
  .post({ key: "value" })   // POST request
  .json()                   // Automatically parse JSON
  .then(console.log)
  .catch(console.error)

2. Powerful Middleware Support

Various functional middleware can be inserted:

// Timeout control
const timeout = delay => req => 
  Promise.race([req, new Promise((_, rej) => 
    setTimeout(() => rej("Timeout"), delay)
  )])

wretch().middlewares([timeout(3000)])

3. Intelligent Error Handling

wretch("/404")
  .get()
  .notFound(error => alert("Resource not found!"))
  .unauthorized(error => alert("Please log in first"))
  .res(res => res) // Normal response

⚡️ 5 Unique Advantages

1. 1. Minimalist Design – 7 times smaller than axios (only 3KB after gzip)
2. 2. No Dependencies – Pure ES6 implementation, no additional polyfills required
3. 3. TypeScript Friendly – Complete type definitions
4. 4. Exceptionally Flexible – Composable middleware system
5. 5. Modern Syntax – Perfect support for async/await

🛠 Three-Step Quick Start Guide

Step 1: Installation

npm install wretch
# or
yarn add wretch

Step 2: Basic Requests

import wretch from 'wretch'

// GET example
wretch("/api/data")
  .get()
  .json(console.log)

// POST example
wretch("/api/user")
  .post({ name: "Alice" })
  .json()

Step 3: Advanced Configuration

// Global configuration
const api = wretch("https://your.api")
  .accept("application/json")
  .contentType("application/json")
  .auth(`Bearer ${token}`)

// File upload
wretch("/upload")
  .formData({ file: myFile })
  .post()

💡 Developer Tips

Practical Tip 1: Automatic Retry

const retry = (maxAttempts, delay) => req => 
  req.catch(err => maxAttempts-- <= 0 
    ? Promise.reject(err) 
    : new Promise(res => 
        setTimeout(res, delay))
          .then(() => retry(maxAttempts, delay)(req.clone())))

wretch().middlewares([retry(3, 1000)])

Practical Tip 2: Request Cancellation

const controller = new AbortController()

wretch("/api")
  .signal(controller)
  .get()
  .then(console.log)

// Call this to cancel
controller.abort()

Common Questions Q&A

Q: How to upload files?A: Use the <span>.formData()</span> method in conjunction with HTML5’s File API

Q: Is it compatible with IE?A: Requires additional polyfills for fetch and Promise

Q: Can requests be intercepted?A: Achieved through <span>.before()</span> and <span>.after()</span> middleware

🌟 Conclusion

wretch is like putting a “super suit” on fetch, retaining the performance advantages of the native API while addressing the pain points of the development experience. Especially for modern frontend projects, it can significantly reduce boilerplate code, allowing developers to focus on business logic.

Try this amazing little tool now! If you encounter any issues while using it or have exclusive tips, feel free to leave a comment for discussion~ (For more technical content, please follow our public account 👉 [Efficiency Software Library])