dankreiger / puppy-fetch Goto Github PK

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.

npm install puppy-fetch

or

yarn add puppy-fetch

1. import puppyFetch

   import puppyFetch from 'puppy-fetch';

2. 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.