DEV Community

dev456456
dev456456

Posted on

πŸš€ Fetchless – The New Era of HTTP Requests: Smart, Fast & Effortless

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));
Enter fullscreen mode Exit fullscreen mode

πŸ”§ 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]
  }
});
Enter fullscreen mode Exit fullscreen mode

✍️ Using Interceptors

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

client.addResponseInterceptor((response) => ({
  ...response,
  data: transformData(response.data)
}));
Enter fullscreen mode Exit fullscreen mode

βŒ› Prefetching

import { prefetch } from 'fetchless';

prefetch('https://api.example.com/future-data');
Enter fullscreen mode Exit fullscreen mode

πŸ”„ Abortable Requests

import { abortableGet } from 'fetchless';

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

promise.then(response => console.log(response.data));
abort();
Enter fullscreen mode Exit fullscreen mode

πŸš€ 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>
  );
}
Enter fullscreen mode Exit fullscreen mode

πŸ“Š Cache Statistics

import { defaultClient } from 'fetchless';

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

defaultClient.clearCache();
Enter fullscreen mode Exit fullscreen mode

🌐 Learn More


✨ Installation

npm install fetchless
Enter fullscreen mode Exit fullscreen mode

πŸ™‹ 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
Enter fullscreen mode Exit fullscreen mode

Top comments (0)