add support for aborting via AbortController

[prabirshrestha]

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

[developit]

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.

[prabirshrestha]

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

[Jador]

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

[prabirshrestha]

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

[lxsmnsyc]

An implementation of WHATWG AbortController interface.

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

[dangdennis]

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

[JohnnyFun]

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
}

[nfantone]

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.