Async/Await

Modern ~15 min read

Introduction

async and await make promises easier to write.

The keyword async before a function makes the function return a promise.

HTML

CSS

<h2>Async Function Demo</h2>
<p id='asyncOutput'></p>

The keyword await before a promise makes JavaScript wait until that promise settles and returns its result.

Note: await only works inside an async function.

HTML

CSS

<h2>Await Demo</h2>
<p id='awaitOutput'>Waiting...</p>

You can handle errors in async functions using standard try...catch blocks.

HTML

CSS

<h2>Error Handling Demo</h2>
<p id='errorOutput'></p>

Can you use 'await' outside of an 'async' function?

Yes, always

No, never (except top-level await in modules)

Only in loops

Only in callbacks