1

I have a fetch statement that relies on the value of another fetch statement. When I execute the below, the first fetch succeeds (returns the user), but the second fetch that relies on the value from the first fails with TypeError: Failed to fetch. I've tried this against MS Edge, FF and Chrome with the same result (I've also tried asnyc/await, and that resulted in the same issue). I've tested each of these calls independently (the second with john-doe hard-coded into the call). They work independently (the service on the back-end is Jersey).

I am coming from a jQuery background, where I would do the below using $.when, but we are trying to get away from libraries and frameworks in our office. Any help would be greatly appreciated. I've tried every solution I've found on this site and elsewhere with no success. 

fetch('/my_services/rest/services/getUser')
.then(function(response) {
  return response.text(); 
})
.then(function(data) {
  alert(data); // correctly displays "john-doe"
  return fetch('/my_services/rest/services/getMetaForUser/' + data); 
})
.then(function(response) {
  return response.text();
})
.then(function(data) {
  alert(data);  
})
.catch(function(error) {
  alert(error); // TypeError: Failed to fetch
});
Jack
  • 11
  • 4
  • 2
    not sure what your api expects, but it is likely the you need a `/` after `/getMetaForUser` – Gabriele Petrioli May 19 '20 at 20:23
  • Thank you. That was a copy and paste typo. I corrected it. – Jack May 19 '20 at 20:28
  • 1
    Are there any details in developer tools under network ? like is request sent, or is it rejected with some reason ? – SergeS May 19 '20 at 20:31
  • 1
    ok, have a look at the network tab of the developer tools of your browser and verify that the requested endpoint is the correct. Also can you share how the `getMetaForUser` endpoint is set up ? (*verb, route paremeters, url parameters ...*) – Gabriele Petrioli May 19 '20 at 20:33
  • 1
    I think More clear aproach will be by using `async await`. Check out how to use async await with fetch https://javascript.info/async-await – Jimish Fotariya May 19 '20 at 20:35

3 Answers3

0

Use async-await syntax like this : 

 async function yourFunction() {
     let response = await fetch(`/first/api...`);
     let name = await response.json()
     console.log(name)//John
     let res = await fetch(`/second/apiwithName....`);
     let data = await res.json()
     console.log(data)//your data 
 }

 yourFunction();
Hrishi
  • 1,210
  • 1
  • 13
  • 25
0

You should try to see if the second fetch does get a response. You can use response.ok This should return true if it works. You can also check the status with response.status.

This should help you to check if the error comes from the code or if it is a network/API call problem.

Levizar
  • 75
  • 1
  • 8
  • Thanks. There is no response from the second fetch. I'll retry the async approach Hrishi suggests. My last effort to do that failed on the second await. What's strange to me is that independently each call works (where I manually plug in the final value for the second call). – Jack May 19 '20 at 21:51
  • That's strange because it should work. You could try to add some console.log to debug and see how far it goes until it blocks. I suspect the "alert" to block the request. You could try to get rid of the alert and replace it by console log to be sure it doesn't come from there. Edit: I've just seen your answer. Nice that you found out. :) – Levizar May 21 '20 at 11:59
0

Thanks everyone. The problem was resolved when I added a "return false" to my onclick event handler and appended the "</a>"

This failed:

<a href onclick="myFunc()">Click to do x...

And this worked:

<a href onclick="myFunc(); return false;">Click to do x...</a>

Can't believe I missed the ending anchor for the a href. Thanks again to all. Although both approaches work, I agree with those who suggested to use async/await. For this task, that seems the cleaner method.

Much appreciated, guys.

Jack
  • 11
  • 4