Promise .catch() versus async/await try...catch
Async error-handling models.
.catch() handles rejection for all preceding chain steps and reads functionally; try/catch reads synchronously and can scope errors per await, but only catches awaited rejections.
WHAT THIS TESTS Your understanding of how rejected promises propagate and where each style catches them, including the subtle trap that try/catch only sees what you await.
A GOOD ANSWER COVERS With a Promise chain, a single trailing .catch() handles a rejection originating in any preceding then in the chain, because rejection skips down to the next rejection handler. That makes one catch cover the whole pipeline, which is concise but coarse; per-step recovery requires inserting catches between links. With async/await, you wrap awaited calls in try/catch, which reads top to bottom like synchronous code and lets you scope a try around exactly the awaits you want to recover from, enabling fine-grained handling and local fallbacks. The critical caveat is that try/catch only catches a promise's rejection if you await it; a forgotten await or a fire-and-forget call rejects outside the block and becomes an unhandled rejection. Both styles ultimately work on the same promises.
COMMON WRONG ANSWERS Believing try/catch magically catches all async errors including unawaited ones. Thinking .catch() only catches the immediately preceding then. Forgetting that mixing await without try/catch silently swallows or escalates rejections. Claiming one style is universally superior.
LIKELY FOLLOW-UPS What happens to a rejection if you forget await? How do you catch errors from Promise.all? Where does finally fit in each style? How do you handle errors in a loop of awaits?
ONE CONCRETE EXAMPLE fetchUser().then(parse).then(render).catch(showError) routes any failure in fetch, parse, or render to one handler. The equivalent async version, try { const u = await fetchUser(); render(parse(u)); } catch (e) { showError(e); }, reads sequentially and lets you, say, wrap only await fetchUser() to retry just the network call while letting render errors bubble. But writing fetchUser() without await inside the try means its rejection escapes the catch entirely and surfaces as an unhandled promise rejection.
Read the original → developer.mozilla.org
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.