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?
I wonder if this works the same as
try/catchblock
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()withasync/awaitfor 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;
});