Problem with a 'double fetch' call in React Native

Question

I am having problems using 'nested' Fetch calls within a React Native function. It seems the first Fetch works correctly, however an error is thrown on the second. Here is the code:

     //****CALL TWO FETCH REQUESTS...
const data = { passkey: '12345', callup: 'name' };
const secondary = { passkey: '12345', callup: 'name' };

 fetch('https://myremoteserveraddress', {
   method: 'POST', 
   headers: {
     'Content-Type': 'application/json',
   },
   body: JSON.stringify(data),
 })
 .then(function(response) {

   if (response.ok) {
    return response.json();
   } else {
    return Promise.reject(response);
   }

 })
 .then(data => {

  // Store the post data to a variable
  _post = data;
  console.log('Success on FIRST FETCH:', data);
  console.log('answer is:', data.answer);
  console.log('answer is:', _post.answer);

  // Fetch another API
    fetch('https://myremoteserveraddress', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(secondary),
    })

 })
 .then(function (response) {

  if (response.ok) {
    return response.json();
  } else {
    return Promise.reject(response);
  }

 })
 .then(function (userData) {

 console.log('Returned from BOTH fetch calls');  //does not write to console
 console.log(_post, userData);  //does not write to console
 this.vb.start();
 })
 .catch((error) => {
   console.error('Error in onPressPublishBtn:', error);
 });
 //****

It seems the second Fetch call returns 'undefined', despite being identical to the first Fetch call which seems to work successfully. The error returned is "TypeError: undefined is not an object (evaluating 'response.ok')". If anybody can advise on what the problem may be I would be greatly appreciative. Thank you in advance.

You don't return the second fetch in your chained `.then` handlers, so response is undefined. — Jared Smith, Dec 17 '20 at 18:03
Thank you for the reply. That solved the issue, however now I get the same error regarding the "this.vb.start();" in the ".then" block that executes after the second Fetch call. It worked before when I used only one Fetch...any ideas why? — Pangit, Dec 17 '20 at 18:24
https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback — Jared Smith, Dec 17 '20 at 18:52
Thank again for the information. I'm sorry but I find this demonic language extremely convoluted. It seems from the page you linked that using an arrow function would be the way to go...however I am unsure how to pass the "vb.start" to it...I used "hello = () => {vb.start();}" within that ".then" that executes after the two Fetch statements. I do not get an error however it doesn't seem to accomplish anything either, it just seems to be ignored...is there some way to pass the "vb.start" into an arrow function to get it to execute? Should it be external to the ".then" block? Thanks again. — Pangit, Dec 17 '20 at 20:37
`.then((userData) => { this.vb.start(); })`. And anything developed over 25 years with strong legacy constraints ("can't break the web!") is going to be convoluted. — Jared Smith, Dec 17 '20 at 21:46
Thank you for the response. I finally had a chance to try that out...and it seems to be functional. I am grateful for your help, much appreciated. — Pangit, Dec 18 '20 at 13:39

score 0 · Accepted Answer · answered Dec 17 '20 at 17:54

0

You should return a Promise from the second then(...) block so that the response is passed to the third then(...) block. You might want to try something like this:

// Fetch another API
return fetch('https://myremoteserveraddress', {
 method: 'POST',
 headers: {
   'Content-Type': 'application/json'
 },
 body: JSON.stringify(secondary),
})

answered Dec 17 '20 at 17:54

matej bobaly

456
3
6

Thank you for the reply. As my comment above, that solved the issue, however now I get the same error regarding the "this.vb.start();" in the ".then" block that executes after the second Fetch call. It worked before when I used only one Fetch...any ideas why? – Pangit Dec 17 '20 at 18:25
You are using classic Javascript function in you third `fetch(...)` block. A classic Javascript function binds `this` to new scope meaning that `this.vb` is not defined. On the contrary, arrow functions inherit parent scope. You should try this in you last then(...) block: `.then((userData) => { ... })` Note: consider using async await pattern. – matej bobaly Dec 17 '20 at 20:58
Thank you for the reply. Your answer is basically the same given by Jared Smith, above. Therefore it is also right on! I suppose the 'return' in the second Fetch is what creates a new scope...correct? I appreciate the advice, thanks again. Regards. – Pangit Dec 18 '20 at 13:42

Problem with a 'double fetch' call in React Native

1 Answers1