fetch-tools

Set of utilities for JS fetch function.

Goals

  • do not change fetch behavior, just add some features
  • ability to run in browser, Node.js, Deno, Bun
  • zero dependencies

Installation

# in Node.js
npm add @krutoo/fetch-tools

# in Node.js via yarn
yarn add @krutoo/fetch-tools

# in Bun
bun add @krutoo/fetch-tools

Usage

Creating fetch with some extra features.

import { configureFetch, applyMiddleware } from '@krutoo/fetch-tools';
import { baseURL, validateStatus, defaultHeaders, log } from '@krutoo/fetch-tools/middleware';

// configure your own fetch...
const myFetch = configureFetch(
  fetch,
  applyMiddleware(
    // add base URL (like in axios)
    baseURL('https://jsonplaceholder.typicode.com/'),

    // validate status (like in axios)
    validateStatus(status => status >= 200 && status < 300),

    // add default headers
    defaultHeaders({ 'user-agent': 'test' }),

    // log request stages (before request, after response, on catch)
    log({ onCatch: ({ error }) => console.error(error) }),
  ),
);

// ...and using it like normal fetch
myFetch('posts/1')
  .then(res => res.json())
  .then(data => console.log(data));

Middleware

Middleware are just functions and you can write your own.

async function myMiddleware(config, next) {
  try {
    // [do something before request here]

    const response = await next(config);

    // [do something after response here]

    return response;
  } catch (error) {
    // [do something on error here but don't forget throw error or return response]

    throw error;
  }
}

Builtin middleware

baseURL

Returns a middleware that will concatenate url with base url part from parameter.

import { configureFetch, applyMiddleware } from '@krutoo/fetch-tools';
import { baseURL } from '@krutoo/fetch-tools/middleware';

const myFetch = configureFetch(
  fetch,
  applyMiddleware(baseURL('https://jsonplaceholder.typicode.com/')),
);

validateStatus

Returns a middleware that will validate status.

import { configureFetch, applyMiddleware } from '@krutoo/fetch-tools';
import { validateStatus } from '@krutoo/fetch-tools/middleware';

const myFetch = configureFetch(
  fetch,
  applyMiddleware(validateStatus(status => status >= 200 && status < 300)),
);

defaultHeaders

Returns a middleware that will set default headers to request.

import { configureFetch, applyMiddleware } from '@krutoo/fetch-tools';
import { defaultHeaders } from '@krutoo/fetch-tools/middleware';

const myFetch = configureFetch(fetch, applyMiddleware(defaultHeaders({ 'user-agent': 'spy' })));

log

Returns a middleware that will log phases by handler.

import { configureFetch, applyMiddleware } from '@krutoo/fetch-tools';
import { log } from '@krutoo/fetch-tools/middleware';

const myFetch = configureFetch(
  fetch,
  log({
    beforeRequest({ config }) {
      console.log(config);
    },

    afterResponse({ config, response }) {
      console.log(response);
    },

    onCatch({ config, error }) {
      console.error(error);
    },
  }),
);

Returns a middleware that will accumulate cookies. Useful on the server.

import { configureFetch, applyMiddleware, createCookieStore } from '@krutoo/fetch-tools';
import { cookie } from '@krutoo/fetch-tools/middleware';

const store = createCookieStore();

const fetch1 = configureFetch(fetch, applyMiddleware(cookie(store)));
const fetch2 = configureFetch(fetch, applyMiddleware(cookie(store)));

await fetch1('https://www.hello.com/');
await fetch2('https://www.world.com/');

// there will be cookies from all responses
console.log(store.getCookies());

To do

  • JWT middleware