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

Question

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?

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