44

When requesting from a server with JavaScript fetch API, you have to do something like

fetch(API)
  .then(response => response.json())
  .catch(err => console.log(err))

Here, response.json() is resolving its promise.

The thing is that if you want to catch 404's errors, you have to resolve the response promise and then reject the fetch promise, because you'll only end in catch if there's been a network error. So the fetch call becomes something like

fetch(API)
  .then(response => response.ok ? response.json() : response.json().then(err => Promise.reject(err)))
  .catch(err => console.log(err))

This is something much harder to read and reason about. So my question is: why is this needed? What's the point of having a promise as a response value? Are there any better ways to handle this?

9
  • 4
    The response object is not a promise. It's a response, with a json (and method among others which returns a promise. Is your question why json() returns a promise?
    – user663031
    Sep 22, 2015 at 16:24
  • 1
    Not exactly a duplicate, but you might want to look here
    – Amit
    Sep 22, 2015 at 17:15
  • Do you really need the content of the 404 response as your error? If not, there are simpler ways to achieve what you want. If you do, I don't see anything wrong with how fetch works.
    – Bergi
    Sep 22, 2015 at 17:48
  • 3
    @caasjj: response.json() does return a promise as well (as it waits for the body to load)
    – Bergi
    Sep 22, 2015 at 21:19
  • 1
    Does this answer your question? Why does .json() return a promise?
    – Henke
    May 27, 2021 at 16:04

2 Answers 2

39

If your question is "why does response.json() return a promise?" then @Bergi provides the clue in comments: "it waits for the body to load".

If your question is "why isn't response.json an attribute?", then that would have required fetch to delay returning its response until the body had loaded, which might be OK for some, but not everyone.

This polyfill should get you what you want:

var fetchOk = api => fetch(api)
  .then(res => res.ok ? res : res.json().then(err => Promise.reject(err)));

then you can do:

fetchOk(API)
  .then(response => response.json())
  .catch(err => console.log(err));

The reverse cannot be polyfilled.

4

Because somtimes we need a precise control for the loading process (from recieving the first piece of data to recieving the last one).

In actual world, json may not be a good example cause it's reletively samll. But imaging a situation where a large picture is loaded gruadually (from mosaic to clear). In that case, it is too late to inform the program when the data recieving has done completely.

Since fetch() is a relatively low level api, otherwise you could use axios or so on.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.