Responsive Native Choice: A Second Promise

Question

Strange problem with React Native fetch. It worked earlier, not sure what I changed, but it stopped working.

login(data,success,fail){ console.log('doing fb login'); fetch(host+'/api/login?credentials='+data.credentials) .then( (response) => { console.log('got login response'); return response.json(); } ) .then( json => { console.log('got login json'); if(json.result!='fail'){ success(json); } else { fail(json); } return json; }) .catch((error) => { console.warn(error); }); } 

The problem is that I see the first message “received a response to the input”, but then it just hangs and nothing happens until I click on the screen on which it launches “login login json” and continues as expected.

This is frustrating because it happens sequentially and I don’t see why the second .then () does not work automatically.

Any help is greatly appreciated.

EDIT: Found a similar question: What could cause this slow fetch in a native reaction?

it looks like it is already being viewed: https://github.com/facebook/react-native/issues/6679

Also, behavior is only observed when Chrome debugging tools are enabled ... interesting

Answer 1

response.json () is a promise , not a value. So this will not solve for you. I would also check the result based on response.status instead of json.result, because for some case the server response will not be converted to json (e.g. 401).

 .then( (response) => { if (response.status >= 200 && response.status < 300) { response.json().then((data) => success(data)); } else { fail(response); } })