AbortController

You can use AbortController to:

abort one or more Web requests;
abort a request with a timeout.

You can create a new AbortController object using the AbortController() constructor, passing a AbortSignal object to fetch to abort a request:

let abortController;
 
function download() {
  abortController = new AbortController();
  const { signal } = abortController;
 
  fetch("download", {
    signal,
  })
    .then(() => {})
    .catch((err) => {
      console.error(err);
    });
}
 
function onCancel() {
  if (abortController) {
    abortController.abort("");
  }
}

Cancel a request with timeout

/**
 * fetch with timeout
 * @param {number} timeout
 */
async function getAnswer(timeout) {
  try {
    const res = fetch("api", {
      // other options
      signal: AbortSignal.timeout(timeout),
    });
    // do something
  } catch (err) {
    if (err.name === "TimeoutError") {
      // handle timeout error
    } else {
      // other
    }
  }
}

or both (not recommended, check caniuse AbortSignal.any (opens in a new tab))

function download() {
  const abortController = new AbortController();
 
  fetch("download", {
    signal: AbortSignal.any([
      abortController.signal,
      AbortSignal.timeout(5000),
    ]),
  })
    .then(() => {})
    .catch((err) => {
      console.error(err);
    });
}

Index Module Exports and Exports