puppy-fetch

Puppy Fetch

A small wrapper for the Fetch API that uses the AbortController interface to cancel in-flight fetch requests.

Using puppy-fetch helps by making repeated fetch calls abortable by default. This is especially helpful for speeding up the UX for users with a slower internet connection.

Install

npm install puppy-fetch

or

yarn add puppy-fetch

Usage

• import puppyFetch

  import puppyFetch from 'puppy-fetch';
  

• Give puppyFetch a unique identifier, and then use it just like you would use the Fetch API.

  const some_unique_string = 'some_unique_string';
  const another_unique_string = 'another_unique_string';
  
  // GET EXAMPLE
  puppyFetch(
    some_unique_string,
    'https://jsonplaceholder.typicode.com/todos/1'
  );
  
  // POST EXAMPLE (note, when aborting, you should not mutate information on the server)
  puppyFetch(another_unique_string, 'https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
      title: 'foo',
      body: 'bar',
      userId: 1
    }),
    headers: {
      'Content-type': 'application/json; charset=UTF-8'
    }
  });
  

Requests with the same unique identifier will be automatically aborted.

You can polyfill older browsers by running:

npm install --save abortcontroller-polyfill

and then importing the polyfill above your puppy-fetch import:

import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
import puppyFetch from 'puppy-fetch';

See https://www.npmjs.com/package/abortcontroller-polyfill for more information.

More info:

Aborting an instance of a finished request does nothing, and therefore is fine to do.