react-fetch-component icon indicating copy to clipboard operation
react-fetch-component copied to clipboard

Support aborting

Open techniq opened this issue 6 years ago • 1 comments

Now that fetch supports aborting using AbortController via a signal, it would be nice if we did as well. Currently we track whether the component is mounted and not call setState, but properly cancelling the fetch request would be better, especially since it's considered an anti-pattern

Some details:

  • https://developers.google.com/web/updates/2017/09/abortable-fetch
  • https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
  • https://github.com/whatwg/fetch/issues/447
  • https://stackoverflow.com/questions/31061838/how-do-i-cancel-an-http-fetch-request

It's only supported in recent green browsers (Chrome, Firefox, Edge, Safari (desktop) and not IE, iOS Safari (currently) so we will need to support opting in / polyfiling.

A quick search returned this polyfill, and Netflix's yetch (which you should be able to pass to the fetchFunction prop

  • https://github.com/mo/abortcontroller-polyfill
  • https://github.com/Netflix/yetch

Maybe this is an opt-in via cancellable prop, and we continue to track mounted otherwise.

techniq avatar Jun 22 '18 02:06 techniq

Hook implementation that might be worth looking at: https://github.com/mauricedb/use-abortable-fetch

Not sure if fetch-mock supports testing aborting, or if this is ultimately just handled by node-fetch

techniq avatar Dec 06 '18 14:12 techniq