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

Question

Normally when it comes to error handling for async / awai t 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?

Answer 1

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