Add a pseudo timeout/deadline to a request using the ES6 fetch api

fetch-timeout.js

Promise.race([
  fetch('/foo'),
  new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Timeout')), 7000)
  )
]);

Promise.race: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/race
fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

👏

🙌

👍

This does not cancel the (hanging) request. Use this solution instead: https://stackoverflow.com/a/57888548/13037768.

const fetchTimeout = (url, ms, { signal, ...options } = {}) => {
    const controller = new AbortController();
    const promise = fetch(url, { signal: controller.signal, ...options });
    if (signal) signal.addEventListener("abort", () => controller.abort());
    const timeout = setTimeout(() => controller.abort(), ms);
    return promise.finally(() => clearTimeout(timeout));
};

Not supported in Internet Explorer (it is in Edge). See https://developer.mozilla.org/en-US/docs/Web/API/AbortController#Browser_compatibility

Not supported in Internet Explorer (it is in Edge).

ppl should stop supporting IE