React-native: [fetch] how to set fetch's timeout ?

[hufeng]

dear all,

how to set fetch's timeout ?

[simondelacourt]

Found this;

{
method: 'GET'
, headers: {} // request header, format {a:1} or {b:[1,2,3]}
, follow: 20 // maximum redirect count, 0 to not follow redirect
, timeout: 0 // req/res timeout in ms, 0 to disable, timeout reset on redirect
, compress: true // support gzip/deflate content encoding, false to disable
, size: 0 // maximum response body size in bytes, 0 to disable
, body: empty // request body, can be a string or readable stream
, agent: null // custom http.Agent instance
}

as options for https://github.com/bitinn/node-fetch

Maybe worth trying, as far as I know the react native fetch is based on the default fetch api, so this might work..

[brentvatne]

dupe #2556

[adambene]

@simondelacourt RN uses whatwh-fetch runtime so there is no timeout by default. I have a workaround (whatwg-fetch-timeout package): https://github.com/facebook/react-native/issues/2556#issuecomment-282876518

I am really curious about how you enthusiast RN users out there build robust apps without having timeout and abort().

[thecodecafe]

This answer was quite helpful, worked like a charm.
Answer

[adambene]

@mrbarde It does not abort the pending HTTP request.

[thecodecafe]

@adambene yh it doesn't and that's a pain in the neck, I just use it so I can update my UI for the user.

[adambene]

@mrbarde Yeah, agree.

[dzpt]

@simondelacourt it doesn't work with react
Any better solution?

[WardianGames]

I would enclose my fetch requests with async functions or promises. Then set a timeout, on the parent if the promise has not returned by the time the timeout does, stop waiting for it to return and move on.

[adambene]

@WardianGames it is okay for get methods but in the case of post it would be essentisl to be able to abort the pending request after a given timeout.

[sebringj]

I'm doing a hack with XMLHttpRequest and return it on the returned request with the "abort" method attached to the returned promise that has a closure to the xhr object. The calling code can then assign itself the request and abort it later. Not elegant but works. Chaining in promises basically breaks it unless you get the first reference to the request.

I use it like this.

if (this.request) this.request.abort()
this.request = someApiCall(data)
let results = await request

where this.request is held on to and aborted if more requests are made. Still experimenting with this but seems to work for not queuing up too many requests so far.

The code is kind of like this but still tweaking.

function retch(url, params) {
  let xhr = new XMLHttpRequest()
  let promise = new Promise((resolve, reject) => {
    // do your xhr stuff here with resolve, reject
  })
  promise.abort = () => xhr.abort()
  return promise
}

[sananddev]

i am still searching for the solution using fetch and timeout but..... it gets me searching all day