@akiyamka/extended-fetch

extended-fetch

Tiny window.fetch JavaScript implementation without over XMLHttpRequest with additional features
Can be used ds drop in replacement for fetch

Installation

npm install @akiyamka/extended-fetch

Usage

Works just like native fetch, but with few additional features:

Catch timeout error

Fetch does not allow the user to know if his request was failed due to a 504 error.
Instead it throws common TypeError: Failed to fetch
But extended-fetch throw 'Timeout Error' error for that case

import { fetch, isTimeoutError } from 'extended-fetch';

fetch('/users', {
  method: 'POST',
  body: JSON.stringify({ foo: 'bar' }),
}).catch((error) => {
  // Allow identify timeout error
  console.assert(error.message, 'Timeout Error');
  console.assert(isTimeoutError(error), true);
});

Subscribe to xhr events:

Also you can hook XMLHttpRequest events:

• loadstart
• load
• loadend
• progress
• error
• abort

fetch(
  '/users',
  {
    method: 'POST',
    body: JSON.stringify({ foo: 'bar' }),
  },
  {
    // Extra setting
    eventListener: (event) => {
      if (event.type === 'progress') {
        console.log(`Progress changed to ${event.payload}`);
      }
    },
  }
).catch((error) => {
  // Allow identify timeout error
  console.assert(error.message, 'Timeout Error');
  console.assert(isTimeoutError(error), true);
});

Credits

Inspired by https://github.com/JakeChampion/fetch