2

Normally when it comes to error handling for async/await in JavaScript, people default to use try/catch. But I wonder if I can use .catch() instead, as in


  const res = await fetch().catch((error) => (
    // error handling
  ));

  const json = await res.json();

I wonder if this works the same as a try/catch block

  try {
    const res = await fetch()
    const json = await res.json();
  } catch(e) {
    // error handling
  }

I understand that technically the try/catch block can catch errors raised from res.json(); as well, so I guess it is still preferable to the .catch() example?

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Joji
  • 4,703
  • 7
  • 41
  • 86
  • 3
    The problem is that if you catch an error like this, the function would proceed and `res.json()` would run. It would throw an error or it would just return nothing I'm not sure, but it will cause an expected bahaviour. – Konrad Jul 31 '22 at 22:17
  • Your first example needs a `then()` instead of `await`, so you can parse the json and then catch any errors: `fetch(bla).then(res => res.json()).catch(err)`. – Kokodoko Jul 31 '22 at 22:27

1 Answers1

11

I wonder if this works the same as try/catch block

No - as you've already answered yourself. In particular, the try block around res.json() would also catch errors thrown from that, which you may or may not want.

Also, if you aren't re-throwing an exception from your .catch() callback, its return value will become the res value and res.json() is still called on it, so you better return a valid Response instance.

Is it ok to mix .catch() with async/await for error handling?

Yes, absolutely! It's a much more versatile tool if you want to handle errors from one specific promise only. Doing that with try/catch is much more ugly, so I would even recommend using .catch() for re-throwing errors (when you want a better error message):

const res = await fetch(…).catch(error => {
  throw new Error('Could not reach backend', {cause: error});
});
if (!res.ok) throw new Error(`Backend responded with ${res.status} error: ${await res.text()}`);
const data = await res.json();

If you don't want to re-throw, I recommend using .then() to handle success and failure paths separately:

const data = await fetch(…).then(res => {
  if (!res.ok) {
    console.error(`Backend responded with ${res.status} error`);
    return null;
  }
  return res.json();
}, error => {
  console.error('Could not reach backend', error);
  return null;
});
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • thanks for the answer! Two quick questions:1. in the first example you wrote where you re-throw that error in `await fetch(…).catch(error => { }` I wonder how exactly it would improve anything? and wouldn't it cause crash after the re-throwing since there is no another catch for that? 2. if mix `catch` with `await` is actually good, is there any real world codebase/lib/open source projects use this pattern instead of plain `then().catch()` or `try catch`? – Joji Aug 01 '22 at 02:07
  • @Joji It's re-throwing a different error with a better message (giving context). But yes, that new error still needs to be handled (be shown to the user?) somewhere. Sure, if you can actually *handle* the error in the `.catch()` callback (and `return` [a `new Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) with appropriate content - from cache or something?), you can do that, I just couldn't come up with a good example for that. – Bergi Aug 01 '22 at 04:58
  • @Joji As for open source codebases that use this pattern, I don't know about any or how I'd search for them, but I certainly use this pattern in real-world production code. – Bergi Aug 01 '22 at 05:00
  • @Joji [this documentation](https://javascript.info/async-await) writes "*When we use `async`/`await`, […] we can use a regular `try..catch` instead of `.catch`. That’s usually (but not always) more convenient.*", [this blog post](https://www.robinwieruch.de/javascript-async-await-without-try-catch/) discusses patterns to not use `try`/`catch` if wrapping the entire code is not what you want. – Bergi Aug 01 '22 at 19:31