I'm using fetch API to call query the server in my React Native Application. But, My application taking 50 seconds to call then function after receiving the response from the server. Am I doing any mistake or Is Promise working very slow?

fetch(url, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: bodyContent
    }.then((responseText) =>  {
        console.log(responseText);
        responseText.json().then(function(response){
             console.log(response);
        });
    });

response is printing in log 50 seconds after the responseText

UPDATE : Just now found that the responseText.json() promise is executing only after I tap on the screen again. This problem is weird.

I'm using fetch API to call query the server in my React Native Application. But, My application taking 50 seconds to call then function after receiving the response from the server. Am I doing any mistake or Is Promise working very slow?

fetch(url, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: bodyContent
    }.then((responseText) =>  {
        console.log(responseText);
        responseText.json().then(function(response){
             console.log(response);
        });
    });

response is printing in log 50 seconds after the responseText

UPDATE : Just now found that the responseText.json() promise is executing only after I tap on the screen again. This problem is weird.

• javascript
• react-native
• fetch-api

• What you looked at the request an figure out where the problem is? – epascarello Commented Apr 8, 2016 at 12:44
• I was seeing the console log. Its logged responseText first and It logged response after 50 mins. – Sriraman Commented Apr 8, 2016 at 13:23
• So what is taking so long with the request, network panel will show you some details, but you probably need to look at the serverside logs to see what the issue is there. If the issue is in the response callback how big is the reponse that is being returned that it takes forever to parse? – epascarello Commented Apr 8, 2016 at 13:24
• The console log your refer to is the console.log(responseText) in the code above? Isn't the cuplrit the json function then? – Frederick Motte Commented Apr 8, 2016 at 13:26
• Server returning the data immediately. responseText is from the server. The json function is taking 50 seconds to extract the response from the responseText – Sriraman Commented Apr 8, 2016 at 13:27

5 Answers 5

Finally, I found the solution for this problem. It is because of the Chrome Debugging. If I stop chrome debugging, It is working fine. If Chrome debugger is running, I have to tap on the screen for the return value. So, Ignore this delay if you are running chrome debugger.

Since we narrowed it down to the json() call that takes too much time, it seems that this is a reported issue (https://github./facebook/react-native/issues/6418) that doesn't happen often and so far is not reproducible. It might have to do with structure or size of your json object.

Personally I use the code construct you use quite heavily in my react native apps and there is no performance penalty. However, my typical reponse is quite small and simple (e.g. a list of 10 objects with about 20 keys, no nesting etc.)

You could try the suggestion in the issue report I linked to and use responseText.text() and pare performance.

promise little bit slower than callback. But not 50sec! I think you have problem with internet connection.

I have encountered the same issue, the responseText es back straight away in milliseconds, but when it convert to json using .json(), it takes a few seconds, the interesting thing is if I click the screen during the .json() parsing period, it get the json data back straight away

Try to open your webtool kit developper from your browser (monly F12 key) and go into network tab.

You can see the time that your query take. If it takes long, it's either your network connection or the server which have a delayed response set.

If not, it's client side.