Will the second callback in then() be executed and why we need a throw statement?

Question

I'm new to JavaScript and currently learning about Async JavaScript and HTTP Requests.

Here is the code that causes the confusion:

fetch(url, {
  method: "POST",
  headers: {
    "Content-type": "application/json",
    apikey: apiKey,
  },
  body: data,
})
  .then(
    (response) => {
      if (response.ok) {
        return response.json();
      }
      throw new Error("Request failed!");
    },
    (networkError) => {
      console.log(networkError.message);
    }
  )
  .then((jsonResponse) => {
    renderResponse(jsonResponse);
  });

Why is throw statement needed in the first callback in then(), since rejected case will be handled in the second callback?

I tried to ask chatgpt. It told me that when the program reaches the throw statement, then the second callback in then() will be executed, which made me more confused.

I appreciate it if someone could tell me the operating mechanism and the logic behind then() and its two callbacks.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then — Robby Cornelissen, Feb 21 '23 at 06:15
The Fetch API doesn't return a rejected promise for unsuccessful responses, only lower level networking issues. I do not think this code is particular good, it will return a successful promise on network errors which resolves with `undefined`. Better to remove the 2nd `.then()` callback — Phil, Feb 21 '23 at 06:17
"*rejected case will be handled in the second callback?*" however `response.ok = false` case is **not** going to be rejected. "*I tried to ask chatgpt. It told me that when the program reaches the throw statement, then the second callback in then() will be executed, which made me more confused.*" yes, it would be confusing, considering this is completely and utterly false. Rejecting in the `.then()` does *not* call the second callback. It will call further `.catch()` or a two argument `.then()` https://jsbin.com/jiheyibogu/1/edit?js,console — VLAZ, Feb 21 '23 at 06:20
Have a look at the [difference between `.then(…, …)` and `.then(…).catch(…)`](https://stackoverflow.com/q/24662289/1048572). — Bergi, Feb 21 '23 at 08:45

jfriend00 · Accepted Answer · 2023-02-21T06:25:46.230

When you pass two callbacks to .then() as in .then(fn1, fn2), then ONLY ONE of them will get executed based on the state of the parent promise. Throwing in fn1 will NOT cause fn2 to execute.

If you want your error handler to be executed when you throw in a .then() handler, then use a .catch() after it as in:

.then(fn1).catch(fn2)

In that case, throwing in fn1 will cause fn2 to execute.

Why is throw statement needed in the first callback in then(),

In your specific example, the throw is to turn the case when response.ok is not true into a promise rejection. fetch() by default only rejects when there's an actual network error. A 400 or 500 status does not cause a rejection. As far as fetch() is concerned, any response from the server, even a 4xx or 5xx response is considered "success" and results in a resolved promise, not a rejection.

So, the point of your throw is to turn those 4xx and 5xx cases into a rejection. Of course, you don't have any code in your example that will catch that rejection because you don't show a subsequent .catch() or subsequent .then() with the second argument.

since rejected case will be handled in the second callback?

Your throw won't be handle in your second callback. And, a !response.ok won't be handled by your second callback either.

In my opinion, this whole issue of 4xx and 5xx responses not being a rejection is a primary benefit to using other libraries such as axios() or got() as it prevents you from having this extra code every time. Of course, you could also make your own wrapper utility function that you use instead of fetch(). In fact, I was bummed that nodejs was making the fetch() interface a standard interface because IMO this is a usability miss with the way this interface works. It leads to either faulty code when people don't check and handle !response.ok or it results in extra code all the time to do so. Libraries like axios() or got() are configurable in this regard with a default to reject upon 4xx and 5xx response.

[ky](https://github.com/sindresorhus/ky) is the browser-based equivalent to `got()` (same author). Axios IMO is hot garbage — Phil, Feb 21 '23 at 06:27
@Phil - `got()` is my favorite and what I use in nodejs. I mention `axios()` because it is used by a lot of developers (I'm not sure why). I didn't know there was `ky()` in the browser. Will have to remember that. — jfriend00, Feb 21 '23 at 06:27

Will the second callback in then() be executed and why we need a throw statement?

1 Answers1