Why does json return a promise

Question

I ve been messing around with the fetch   api recently  and noticed something which was a bit quirky    let url    http   jsonplaceholder typicode com posts 6    let iterator   fetch url    iterator    then response   gt          return             data  response json              status  response status                 then post   gt  document write post data        post data returns a Promise object  http   jsbin com wofulo 2 edit js output  However if it is written as   let url    http   jsonplaceholder typicode com posts 6    let iterator   fetch url    iterator    then response   gt  response json       then post   gt  document write post title        post here is a standard Object which you can access the title attribute  http   jsbin com wofulo edit js output  So my question is  why does response json return a promise in an object literal  but return the value if just returned

User · Answer

This difference is due to the behavior of Promises more than fetch() specifically.

When a .then() callback returns an additional Promise, the next .then() callback in the chain is essentially bound to that Promise, receiving its resolve or reject fulfillment and value.

The 2nd snippet could also have been written as:

iterator.then(response =>
    response.json().then(post => document.write(post.title))
);

In both this form and yours, the value of post is provided by the Promise returned from response.json().

When you return a plain Object, though, .then() considers that a successful result and resolves itself immediately, similar to:

iterator.then(response =>
    Promise.resolve({
      data: response.json(),
      status: response.status
    })
    .then(post => document.write(post.data))
);

post in this case is simply the Object you created, which holds a Promise in its data property. The wait for that promise to be fulfilled is still incomplete.

User · Answer

Also  what helped me understand this particular scenario that you described is the Promise API documentation  specifically where it explains how the promised returned by the then method will be resolved differently depending on what the handler fn returns      if the handler function          returns a value  the promise returned by then gets resolved with the returned value as its value    throws an error  the promise returned by then gets rejected with the thrown error as its value    returns an already resolved promise  the promise returned by then gets resolved with that promise s value as its value    returns an already rejected promise  the promise returned by then gets rejected with that promise s value as its value    returns another pending promise object  the resolution rejection of the promise returned by then will be subsequent to the   resolution rejection of the promise returned by the handler  Also  the   value of the promise returned by then will be the same as the value of   the promise returned by the handler

User · Answer

Why does response json return a promise    Because you receive the response as soon as all headers have arrived  Calling  json   gets you another promise for the body of the http response that is yet to be loaded  See also Why is the response object from JavaScript fetch API a promise       Why do I get the value if I return the promise from the then handler    Because that s how promises work  The ability to return promises from the callback and get them adopted is their most relevant feature  it makes them chainable without nesting   You can use  fetch url  then response   gt       response json   then data   gt             data  data          status  response status          then res   gt        console log res status  res data title         or any other of the approaches to access previous promise results in a  then   chain to get the response status after having awaited the json body

User · Answer

In addition to the above answers here is how you might handle a 500 series response from your api where you receive an error message encoded in json   function callApi url      return fetch url       then response   gt          if  response ok            return response json   then response   gt     response                     return response json   then error   gt     error                    let url    http   jsonplaceholder typicode com posts 6    const   response  error     callApi url   if  response         handle json decoded response   else        handle json decoded 500 series response

[javascript] Why does .json() return a promise?

Examples related to javascript

Examples related to asynchronous

Examples related to promise

Examples related to fetch-api