Abortable Fetch helper function

README.md

Abortable Fetch helper

Usage

import fetch, { ABORT_ERROR } from 'custom-fetch'

const abortableFetch = makeAbortable(fetch) // Defaults to `window.fetch` if no fetch is passed

const request = abortableFetch('/URL') // Returns an object with a `promise` and an `abort` property

// To abort
request.abort()

// To get response
const response = await request.promise

Example Implementation (Auto-cancelling Fetch)

let request
const getData = async () => {
  if (request && request.abort) {
    request.abort()
    request = undefined
  }

  request = abortableFetch('/URL')

  try {
    const data = await request.promise
    console.log(data)
  } catch (ex) {
    if (ex.name !== ABORT_ERROR) {
      console.error(ex)
    } else {
      console.log('Aborted')
    }
  }
}

makeAbortable.js

/**
 * Makes a fetch function abortable
 * @param {function} fetch
 * @return {object} - Has an `abort` and a `promise` property
 *
 * https://developers.google.com/web/updates/2017/09/abortable-fetch
 * https://github.com/mo/abortcontroller-polyfill#readme
 */
export const makeAbortable = (fetch = window.fetch) => {
  return (input, { controller, signal, ...options } = {}) => {
    if ('AbortController' in window && typeof input === 'string') {
      controller = controller || new AbortController()
      options.signal = signal || controller.signal
    }

    return {
      promise: fetch(input, options),
      abort: () => controller && controller.abort(),
    }
  }
}

export const ABORT_ERROR = 'AbortError'