javascript - react native fetch not calling then or catch - Stack Overflow

admin管理员组

文章数量:1220820

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

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

• javascript
• react-native
• fetch-api

Share Improve this question Follow edited Mar 18, 2022 at 8:45 VLAZ 29k99 gold badges6262 silver badges8383 bronze badges asked Jan 4, 2017 at 15:19 Baran KucukguzelBaran Kucukguzel 12111 gold badge22 silver badges33 bronze badges 3

• try adding catch block like this: .catch(error => error) – Facundo La Rocca Commented Jan 4, 2017 at 15:38
• 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(). – ncuillery Commented Jan 4, 2017 at 19:47
• @ncuillery thank you for your response, it is not happening only in chrome, it happens in test builds of app as well. I have seen the issue you have mentioned, but mine was a little bit different. In that issue the resp,json() method blocks but in my case, the then block is never executed, even though the fetch method is called multiple times. – Baran Kucukguzel Commented Jan 5, 2017 at 7:45

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 7

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.

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.

I got stuck into this too, api call is neither going into then nor into catch. Make sure your phone and development code is connected to same Internet network, That worked out for me.

I had this problem. The cause was that I had extra logging like console.log('response', response), but React Native / Metro / Expo wasn't able to show the logs in the console because of some error. Changing my logging code to console.log('response', JSON.stringify(response)) let me see what was going on.

本文标签： javascriptreact native fetch not calling then or catchStack Overflow