@bitty/create-request

Apply interceptors to fetch and create a custom request function.

• ⚡ Dependency free and pretty small, 0.3KB (minified + gzipped);
• 🏷️ Well type defined with TypeScript (with generics);
• 📦 There are ESM, CommonJS and UMD distributions;

Installation

This library is published in the NPM registry and can be installed using any compatible package manager.

npm install @bitty/create-request --save

# Use the command below if you're using Yarn.
yarn add @bitty/create-request

Usage

@bitty/create-request is curry function, which applies interceptors to fetch and returns a new request function.

import createRequest from '@bitty/create-request';

type Method = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';

const request = createRequest(window.fetch, {
  onRequest: (method: Method, route: string, data: any = undefined) => ({
    url: 'https://api.example.com' + route,
    body: JSON.stringify(data),
    method,
    headers: { 'Content-Type': 'application/json' }
  }),
  onResponse: (response: Response) => {
    if (response.status === 403)
      throw new Error('Authorization error.');
    return response.json();
  },
  onError: (error:? Error) => {
    sentry.captureException(error);
    return Promise.reject(message);
  }
});

request('POST', '/user', {
  name: 'Vitor'
})
  .then((response) => response.success && alert('User was created!'));

Interceptors

• onError

  onError?: (reason?: Error) => Promise<never>;

  Handle request and response errors.

• onRequest

  onRequest?: <A extends any[] = [RequestOptions]>(...params: A) => RequestOptions;

  Handle request and define request arguments. A generic type defines returned request function arguments type.

  

• onRequestError

  onRequestError?: (reason?: Error) => Promise<never>;

  Handle request errors. Overwrites onError handling request errors.

• onResponse

  onResponse?: <R = Response>(response: R) => R | PromiseLike<R>;

  Handle response and define the request return. R generic type defines returned request function result type.

  

• onResponseError

  onResponseError?: (reason?: Error) => Promise<never>;

  Handle response errors. Overwrites onError handling response errors.

Usage on unsupported browsers

Do I support fetch?

Older browsers don't support Fetch API, but you can use unfetch or other polyfill to achieve it.

import fetch from 'unfetch';
import createRequest from '@bitty/create-request';

export default createRequest(fetch, {
  onRequest: (options) => ({
    ...options,
    headers: {
      ...options.headers,
      'Content-Type': 'application/json'
    }
  }),
  onResponse: (response) => response.json()
});

Usage on Node.js

Node environment does not provide global fetch function, but you can use node-fetch to achieve it.

const fetch = require('node-fetch');
const createRequest = require('@bitty/create-request');

module.exports = createRequest(fetch, {
  onResponse (response) {
    return response.json();
  }
});

License

Released under MIT License.