Abort fetches in react native

[giacomocerquone]

Hi, I have a little problem... probably I'm misleading different specs.
I read this article on how to abort a fetch request: https://developers.google.com/web/updates/2017/09/abortable-fetch

and I'm trying to do so in react-native with your library ('cause the standard AbortController has yet to arrive) but it doesn't abort anything.

This is my code:

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);
});

[mysticatea]

Thank you for this issue.

I'm not familiar with react-native.
Does the fetch API in react-native support abort?

AbortController is the object to transfer aborting signal to subscribers.
If the fetch API does not subscribe the aborting signal, the signal would not arrive at anywhere.

[giacomocerquone]

I thought the same thing.
The point is that installing this other polyfill without overwriting the default react native fetch I've been able to cancel a fetch request.

PS. I've asked this and documented the process directly on the react-native github issue

[mysticatea]

I see.
That polyfill looks to overwrite window.fetch and actually doesn't abort; it rejects the returned promise object and leaves the request as is (abortcontroller-polyfill/src/abortableFetch.js).

[giacomocerquone]

You're right, but here is where actually the global fetch is overwritten.

I was misled by the nodejs part in the readme where it manually imports the abortableFetch from the library while I didn't do that in my react-native code (that's because he imported the module as a ponyfill).

All clear then 😄 thank you very much

[mysticatea]

Closing as answered. Thank you.

[PurnimaNaik]

@giacomocerquone Would be very helpful if you share how you get the abort to work with react-native. Hoping you will!

[giacomocerquone]

Ok, enough! Lots of other people (here) asked me the same question.
I'll write a blog post here ASAP: https://blog.giacomocerquone.com/
Stay tuned

[giacomocerquone]

Here the article: https://giacomocerquone.com/aborting-fetch-react-native/

In the next article I will give you some ready to use code to reject requests, but this time instead of giving you code I wanted to explain what is going on and how and why is useless to use polyfills like this in react native as of now.

Enjoy, hope I did a good thing!
As I wrote in the post, in the next article I will share with you my simple and short piece of code that I use to make requests that implements fetch rejection with few lines of code among other things

[sebringj]

@giacomocerquone XMLHttpRequest is baked into the core of react native
https://facebook.github.io/react-native/docs/network#using-other-networking-libraries
https://github.com/facebook/react-native/blob/master/Libraries/Network/XMLHttpRequest.js#L534
https://github.com/facebook/react-native/blob/master/Libraries/Network/RCTNetworking.mm#L683
and axios supports cancelling (aborting) a connection using XMLHttpRequest under the hood. https://github.com/axios/axios#cancellation

Web standards are preferred when they are actually implemented. Thanks for the tip on abortController and I will be using axios instead of the half-baked fetch implementation.

[giacomocerquone]

@sebringj damn you're right, I think they added just now that section into the docs (or I completely missed it)! I ask you sorry, I'll edit my post ASAP
Anyway these stuff doesn't matter anymore since they edited the native fetch implementation in order to support the abort there too.