react native fetch not calling then or catch

Question

I am using fetch to make some API calls in react-native, sometimes randomly the fetch does not fire requests to server and my then or except blocks are not called. This happens randomly, I think there might be a race condition or something similar. After failing requests once like this, the requests to same API never get fired till I reload the app. Any ideas how to trace reason behind this. The code I used is below.

const host = liveBaseHost;
const url = `${host}${route}?observer_id=${user._id}`;
let options = Object.assign({
        method: verb
    }, params
    ? {
        body: JSON.stringify(params)
    }
    : null);
options.headers = NimbusApi.headers(user)
return fetch(url, options).then(resp => {
    let json = resp.json();
    if (resp.ok) {
        return json
    }
    return json.then(err => {
        throw err
    });
}).then(json => json);

Solution 1

Fetch might be throwing an error and you have not added the catch block. Try this:

return fetch(url, options)
  .then((resp) => {
    if (resp.ok) {
      return resp.json()
        .then((responseData) => {
          return responseData;
        });
    }
    return resp.json()
      .then((error) => {
        return Promise.reject(error);
      });
  })
  .catch(err => {/* catch the error here */});

Remember that Promises usually have this format:

promise(params)
  .then(resp => { /* This callback is called is promise is resolved */ },
        cause => {/* This callback is called if primise is rejected */})
  .catch(error => { /* This callback is called if an unmanaged error is thrown */ });

I'm using it in this way because I faced the same problem before.

Let me know if it helps to you.

Solution 2

Wrap your fetch in a try-catch:

let res;
try {
    res = fetch();
} catch(err) {
    console.error('err.message:', err.message);
}

If you are seeing "network failure error" it is either CORS or the really funny one, but it got me in the past, check that you are not in Airplane Mode.

Comments

[Facundo La Rocca]

try adding catch block like this: .catch(error => error)

[ncuillery]

Is it happen only when debugging in Chrome ? If so, I might be related to this issue. Try adding setTimeout(() => null, 0); before resp.json().

[Baran Kucukguzel]

Thanks for your answer, actually I return the promise from this method and in another method calling this I have a catch block, which is never executed.

[Facundo La Rocca]

did you try to debug it to see where the error is being thrown (or to see where it is stopping)? Did you see any error in the console (attach them if you have)?

[Baran Kucukguzel]

I do not see any error being thrown and no error in console, it is very weird.

[Facundo La Rocca]

It is very extrange for me the last then you have used: .then(json => json). There you are not returning anything, so if there is something waiting for that result, it will never come. Did you try to implement the code I provided?

[Baran Kucukguzel]

Since i am returning the promise here, I have a catch block where I call this method, I have also tried to add a catch block here as well.

[Mr. Kro]

I have the same problem with OP and in my case this did not solve the problem

[Mr. Kro]

I have the same problem with OP and in my case this did not solve the problem

[Noitidart]

@Mr.Kro it might be caching due to debug mode. Try disconnecting from remote debugging, and restarting the app. Even re-building the app after cleaning (ie: on mac, xcode clean, then build).