CODEWITHSUNDEEP
javascriptpromiseasync-awaittry-catchfetch
DrEarnest
DrEarnest

Reputation: 885

Catching a fetch error

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?

Upvotes: 3

Views: 21664

Answers (3)

Pecata
Pecata

Reputation: 1063

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);
      }
    }

Upvotes: 9

Bergi
Bergi

Reputation: 664528

APIwithoutcatch is an async function - it doesn't throw an exception but rather will reject the promise that it returns. You need to wait for the promise, either with then or await syntax (just like you did await the fetch within APIwithcatch):

async function API() {
  return fetch("http://wwww.example.com/user.json");
}

function callAPI() {
  try {
    await API();
  } catch (e) {
    console.log(e);
  }
}
callAPI();

Upvotes: 3

Igor
Igor

Reputation: 809

UPD: got your problem, unfortunately you can't catch an error like in your code

Fetch is asynchronous, so you mustn't use try {} catch {} construction, use .then().catch() instead: 

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

function callCallAPI() {
  return APIwithoutcatch()
    .then((data) => {
      console.log(data)
    })
    .catch((e) => {
      console.log(e)
    })
}

callCallAPI();

Upvotes: 0

Related Questions