dev456456

Posted on May 13, 2025

🚀 Fetchless – The New Era of HTTP Requests: Smart, Fast & Effortless

#react #webdev #javascript #typescript

A lightweight and powerful alternative to Axios, Fetch, or node-fetch. Not just a wrapper — a true evolution.

🔍 Why Fetchless?

Most HTTP libraries like axios or fetch do the bare minimum: send a request and return a response.
But modern web applications need more: performance, smart caching, robustness, resilience, and most of all... simplicity.

Fetchless delivers all of this with an HTTP API designed for 2025 — combining lightness, intelligence, and automation.

⚙️ Core Features

✅ Efficient Caching: Stores HTTP responses to reduce network calls and boost speed.
✅ Multiple Cache Strategies: Supports cache-first, network-first, and stale-while-revalidate modes.
✅ TypeScript Support: Fully typed API for maximum reliability.
✅ Ultra Lightweight: Minimal footprint with almost no dependencies.
✅ Easy Integration: Works out of the box with any JS or TS project.

🔥 Advanced Features

🔹 Prefetching: Preload resources in the background.
🔹 Request Deduplication: Automatically combines identical concurrent requests.
🔹 Interceptors: Middleware to modify requests/responses on the fly.
🔹 Retry with Backoff: Retries failed requests with exponential delay.
🔹 Persistent Cache: Uses localStorage to keep cache across sessions.
🔹 Abortable Requests: Easily cancel unnecessary requests.
🔹 React Hooks: Built-in hooks to integrate with modern React apps.

🧐 What Makes Fetchless Unique

🛡️ Best practices by default: timeouts, error handling, cache control.
🧬 Network-aware logic: smart cache modes, deduplication, aborts.
⚡ Full TypeScript + React support.
📦 Smart caching: avoid redundant calls, even between sessions.
↺ Automatic retries when the network fails.

🧪 Code Examples

✨ Basic Usage

import { get } from 'fetchless';

get('https://api.example.com/data')
  .then(response => console.log(response.data));

🔧 Creating a Custom Client

import { createAdvancedClient } from 'fetchless';

const client = createAdvancedClient({
  persistCache: true,
  dedupeRequests: true,
  retryOptions: {
    maxRetries: 3,
    backoffFactor: 300,
    retryStatusCodes: [408, 429, 500, 502, 503, 504]
  }
});

✍️ Using Interceptors

client.addRequestInterceptor((url, config) => [
  url,
  {
    ...config,
    headers: {
      ...config?.headers,
      'Authorization': `Bearer ${getToken()}`
    }
  }
]);

client.addResponseInterceptor((response) => ({
  ...response,
  data: transformData(response.data)
}));

⌛ Prefetching

import { prefetch } from 'fetchless';

prefetch('https://api.example.com/future-data');

🔄 Abortable Requests

import { abortableGet } from 'fetchless';

const { promise, abort } = abortableGet('https://api.example.com/large-data');

promise.then(response => console.log(response.data));
abort();

🚀 React Integration

import { useFetchless } from 'fetchless';

function UserProfile({ userId }) {
  const { data, loading, error } = useFetchless(`https://api.example.com/users/${userId}`);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
}

📊 Cache Statistics

import { defaultClient } from 'fetchless';

const stats = defaultClient.getStats();
console.log(stats);
// { hits: 5, misses: 2, ratio: 0.71, size: 7 }

defaultClient.clearCache();

🌐 Learn More

📦 NPM
💻 GitHub

✨ Installation

npm install fetchless

🙋 Call to Action

Try Fetchless today.
Open an issue.
Star the project.
And never write raw fetch again ❤️.

🔖 DEV.to Tags

#javascript #typescript #webdev #react #fetchless #opensource

DEV Community