JavaScript fetch API - Why does response.json() return a promise object (instead of JSON)? [duplicate]

Question

I've just started to learn the Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Here's a code snippet which I wrote to tinker around with it:

fetch('http://swapi.co/api/people/1')
  .then(function(response) {
    var json = response.json();

    console.log(json);
    // Expected : { "name": "Luke Skywalker","height": "1.72 m", ... } 
    // Get : Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
  });

I would have expected to get an JSON object out of response.json().

Similar to what you get when using JSON.parse().

Instead I get a promise object.

If I enlarge the promise chain like shown here ...

return response.json().then(function(json) {
      // process your JSON further
});

... then it works: Within the then method of the following promise it appears as json.

Why can't I retrieve the JSON data within the then() of the first promise?

Can anyone please explain what is going on here?

I would really much appreciate it.

What most people are failing to mention is that by resolving as soon as you get headers, you can begin to do things with that information. Say if you get a 400 and a giant wall of text (not sure why that would be a thing), but you could immediately try a backup call or handle it, instead of wasting time to get the entire response body. — 1mike12
– 1mike12, Commented Aug 9, 2017 at 18:42
I don't want to get down voted for proposing this answer... The object that was returned to you. (you named this "response") It has a datastream that it hasn't tapped into yet. Could be big or small, anyway. If are given a option of reading it and returning a json object. or you could check some header tag and deny the request completely. Ending the request here and now is as easy as throwing an error or returning. But to move forward with that datastream makes more since to use a Promise here. — user1529413
– user1529413, Commented Aug 20, 2021 at 19:26

tlt · Accepted Answer · 2016-09-11 12:07:00Z

28

because response.json() returns another promise (which is within your function body)

https://developer.mozilla.org/en-US/docs/Web/API/Body/json

answered Sep 11, 2016 at 12:07

tlt

15.5k11 gold badges54 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

cluster1 Over a year ago

Awesome. Thanks that at least explains the behaviour. And then I have to call another then for to get the result of the second promise. I just ask myself what's the benefit of all that nesting?

tlt Over a year ago

well, reasons are pretty straightforward: you use promises when you have async, potentially long runing operations. in your case there are 2 such actions: 1) fetch (which gets network resource which might take long time and reaolves it to Response once done) and 2) .json() which takes Response stream and resolves it to json object once its done (which also might be long). since both use promises you need .then() on both if you want to work with objects they resolve to.

cluster1 Over a year ago

Get it. Because of your comment. :) Thanks a bunch !

dshun Over a year ago

This is certainly unexpected, given by the number of questions regarding this behavior, and how other libraries handle ajax / rest api calls in general. It is an unnecessary hurdle for users to jump.

GPP Over a year ago

thanks for this, after trawling through dozens of stackoverflow posts this was the one that helped me realize what I needed to do for returning a new response obj

Collectives™ on Stack Overflow

JavaScript fetch API - Why does response.json() return a promise object (instead of JSON)? [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related