1

I'm trying to implement an HTTP GET using fetch API. I have followed the example provided here and it works however I don't understand exactly what the chain of callbacks does.

In attempt to understand better the example above, I have tried to replace the code provided in the example above with some lines of code that, in my mind, should get the same result but my code does not work and the console returns the following error: response.json is not a function

The following code works (a JSON object is shown in console):

fetch('http://192.168.1.6:8000/lending/getBook/IsbnTest2')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  })

The following code is not working (error "response.json is not a function" is shown in console):

let response = fetch('http://192.168.1.6:8000/lending/getBook/IsbnTest2');
let myJson = response.json();
console.log(JSON.stringify(myJson));

Can you help me to understand what are the differences between the two pieces of code and what the working one is actually doing?

Thanks!

Alessio Cantarella
  • 5,077
  • 3
  • 27
  • 34
anacleto
  • 11
  • 1
  • 3
  • 3
    The `fetch()` function returns a Promise. It's *asynchronous*. The call to `.then()` registers a function to be called when the Promise has been "fulfilled". – Pointy Sep 16 '19 at 17:51
  • 4
    You need to read a tutorial on JavaScript promises – Barmar Sep 16 '19 at 17:52
  • To be even more precise, in the second example, you're trying to call a `json` method on a Promise - which doesn't exist. In the first one, the `json` method is a method on the "fulfilment value" of the promise, which does exist (assuming no error is encountered with the request). And note that this fulfillment value is not available straight away, by calling the promise's `then` method you are telling JS what to do when the promise eventually resolves, some time after this code actually runs. – Robin Zigmond Sep 16 '19 at 17:58
  • Thanks for the comments, so I understand that the fetch immediately returns a Promise and when the server answers the GET the promise is fulfilled. At the same point a response object is generated (which represents the response from the server) and passed to the first callback function which extracts the json from the response. I still have a doubt on why do I need to also use a callback for the stringify method. For example the following code displays an empty object in the console: – anacleto Sep 16 '19 at 20:25
  • ```myJson = fetch('URL').then(function(response) {return response.json();}) console.log(JSON.stringify(myJson));``` – anacleto Sep 16 '19 at 20:32
  • 1
    Ok understood. As the calls in the first statement are asynchronous, the second statement gets executed without waiting the completion of the first statement and hence the empty object in console. – anacleto Sep 16 '19 at 20:45
  • Whatever happened to good old `MyFetch.OnCompleted = MyCallback` or even `Myfetch.AdEveventListener('completed', MyCallback)`... C# actions and delegates have obviously spoilt me with simplicity – Reahreic Feb 26 '21 at 20:57

0 Answers0