unfetch icon indicating copy to clipboard operation
unfetch copied to clipboard

add support for aborting via AbortController

Open prabirshrestha opened this issue 6 years ago • 9 comments

https://developers.google.com/web/updates/2017/09/abortable-fetch

Currently it is only implemented in Firefox 57 and is coming to other browsers soon.

const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => controller.abort(), 5000);

fetch(url, { signal }).then(response => {
  return response.text();
}).then(text => {
  console.log(text);
});

Will most likely need to implement another npm package that just include AbortController package. I found one but it also pollyfills fetch. https://github.com/mo/abortcontroller-polyfill

prabirshrestha avatar Sep 29 '17 16:09 prabirshrestha

So we'd need a new npm package that exports a standalone polyfill for AbortController, and then the only modifications needed to unfetch would be to proxy signal.onabort = request.abort. Seems like it might be doable in a few bytes.

developit avatar Oct 20 '17 18:10 developit

Awesome. Could you post the link to the npm package?

prabirshrestha avatar Oct 20 '17 18:10 prabirshrestha

@prabirshrestha here's one https://www.npmjs.com/package/abortcontroller-polyfill

Jador avatar Oct 30 '17 21:10 Jador

Chrome 66 beta seems to officially support it. https://blog.chromium.org/2018/03/chrome-66-beta-css-typed-object-model.html

prabirshrestha avatar Mar 22 '18 02:03 prabirshrestha

An implementation of WHATWG AbortController interface.

https://github.com/mysticatea/abort-controller

lxsmnsyc avatar Apr 12 '19 10:04 lxsmnsyc

As of 2019, https://caniuse.com/#search=abort AbortController is supported by 86% of browser users. But I'm not sure if AbortController is available for use with XMLHttpRequest. But there's an alternative since that req object already has an .abort API.

So perhaps there can be a way expose the request's XMLHttpRequest.abort method to the caller from the promise wrapper. Although I'm unsure how you'd return that in the context of a Promise since resolve is only allowed to be called once. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort

Edit: Nevermind, someone already solved it using event emitters. https://codesandbox.io/s/92vnjok08r

dangdennis avatar Nov 10 '19 15:11 dangdennis

You could also just add an abort function on the returned promise. Hacky, but works.

function unfetch(url, options) {
  options = options || {};
  const request = new XMLHttpRequest();
  const task = new Promise((resolve, reject) => {
   ...
  });
  task.abort = () => request.abort() // lol
  return task
}

JohnnyFun avatar Jan 10 '20 21:01 JohnnyFun

Any movements on this? With all major green browsers supporting it, AbortController is steadily becoming the norm with many sources and docs out there showing people how to use it. Would be nice to have it baked into unfetch.

nfantone avatar Feb 11 '20 09:02 nfantone

node-fetch is actively recommending abort-controller. At least one of the PRs will bring support. What's preventing movement on this? What's everyone using in the meantime?

mikestopcontinues avatar Nov 30 '20 22:11 mikestopcontinues