Catching a fetch error

Question

My understanding is that a piece of code throwing error anywhere in callstack can be caught at final catch block. for fetch error, when no internet is available, when I make APIwithoutCatch in callCallAPI, error is not caught. while APIwithCatch catches its own error. All other errors e.g. 404, are caught at both places, wherever I want.

async function APIwithcatch() {
  try {
    var response = await fetch("http://wwww.dfdfdf.com/user.json");
    return response;
  } catch (e) {
    console.log(e);
  }
}

async function APIwithoutcatch() {
  var response = await fetch("http://wwww.dfdfdf.com/user.json");
  return response;
}

function callCallAPI() {
  try {
    // return APIwithcatch();
    return APIwithoutcatch();
  } catch (e) {
    console.log(e);
  }
}
callCallAPI();

My assumption that any error should flow down callstack is correct or not? What is special about net::ERR_INTERNET_DISCONNECTED error?

Answer 1

Per MDN, the fetch() API only rejects a promise when a “network error is encountered, although this usually means permissions issues or similar.” Basically fetch() will only reject a promise if the user is offline, or some unlikely networking error occurs, such a DNS lookup failure.

However fetch provides a ok flag that we can use to check if the HTTP status code is a success or not and throw a user-defined exception

await response.json() will extract the JSON body content from the response so we can throw it to the .catch block.

    async function APIwithcatch() {
      try {
        var response = await fetch("http://wwww.dfdfdf.com/user.json");

        if (!response.ok) throw await response.json();

        return response;

      } catch (e) {
        console.log(e);
      }
    }