Ftchup NPM | npm.io

Ftchup

Level up your requests using the native Fetch API.

NPM npm

🚨 This library uses TypeScript without compilation.

Ftchup provides a simplified and type-safe way to handle API calls using the native JavaScript Fetch API. It offers a convenient interface for making single or multiple requests, with the ability to cancel ongoing requests.

Ftchup

Features

Nothing magical or extravagant to say here, just what it does:

Simplified API calls using the native JavaScript Fetch API.
Support for single or multiple requests (in parallel).
Promise-based approach for handling asynchronous operations.
Ability to cancel ongoing requests using an AbortController.
Proper TypeScript typings for a type-safe development experience.

Installation

The installation is the same as any of the billions of libraries you install every day in your JavaScript/TypeScript projects...

Using pnpm:

pnpm install ftchup

Using npm:

npm install ftchup

Using yarn:

yarn add ftchup

Usage

This lib uses the JavaScript Fetch API internally to fetch data, and de request method takes as parameter a Request like object for a single fetch or an Array of Request like objects for a multiple and parallel requests. Read the MDN documentation form more info.

Note that the library uses the Promise.allSettled() for all requests, even if the request is a single request. This is not because I'm lazy, but because I think it's a good idea to keep things simple and requests normalized.

MDN Reference

Simple request:

import { abort, request } from 'ftchup'

interface Pokemon {
  // Is very large and I feel lazy to write it.
}

const API_URL = 'https://pokeapi.co/api/v2/'

const config: RequestConfig = {
  url: API_URL + 'pokemon/charizard',
  options: {
    method: 'GET',
  },
}

request<Pokemon>(config)
  .then(response => console.log(response))
  .catch(error => console.error(error))

Multiple requests:

...
const config: RequestConfig[] = [
  {
    url: API_URL + 'pokemon/dittoo',
    options: {
      method: 'GET',
    },
  },
  {
    url: API_URL + 'pokemon/bulbasaur',
    options: {
      method: 'GET',
    },
  },
  {
    url: API_URL + 'pokemon/charizard',
    options: {
      method: 'GET',
    },
  },
]

request<Pokemon[]>(config)
  .then(responses => {
    responses.forEach(response => console.log(response))
  })
  .catch(error => console.error(error))

To cancel requests:

abort()

You can also use it with async/await

const responses = await request<Pokemon[]>(config)
console.log(responses)

Contributing

If you feel like contributing, I'm sorry for not having prepared a Contributing Guide, but you know, the usual... fork, pull request, and let's talk 😜