Async and Await

Learning objectives#

• Declare async functions
• Pause on promises with await
• Handle errors with try/catch
• Avoid accidental sequential waits

Explanation#

An async function always returns a promise. Inside it, await pauses that function until the awaited promise settles, then gives you its value.

If the awaited promise rejects, await throws, so you handle errors with an ordinary try/catch.

await only pauses the current async function, not the whole program. Other code — click handlers, timers — keeps running.

Visual explanation#

Syntax#

1async function load() {
2  try {
3    const value = await somePromise;
4  } catch (error) {
5    // handle the rejection
6  }
7}

Code example: Sequential vs parallel awaits#

1const wait = (ms, value) => new Promise(r => setTimeout(() => r(value), ms));
2

3async function sequential() {
4  const start = Date.now();
5  const a = await wait(300, 'A');
6  const b = await wait(300, 'B');
7  console.log(a, b, 'sequential ~', Math.round((Date.now() - start) / 100) * 100, 'ms');
8}
9

10async function parallel() {
11  const start = Date.now();
12  const [a, b] = await Promise.all([wait(300, 'A'), wait(300, 'B')]);
13  console.log(a, b, 'parallel ~', Math.round((Date.now() - start) / 100) * 100, 'ms');
14}
15

16async function main() {
17  await sequential();
18  await parallel();
19  try {
20    await Promise.reject(new Error('Network down'));
21  } catch (err) {
22    console.log('Caught:', err.message);
23  }
24}
25main();

A B sequential ~ 600 ms
A B parallel ~ 300 ms
Caught: Network down

Step-by-step explanation#

1. wait() returns a promise that resolves after the given delay.
2. In sequential(), the second wait does not start until the first finishes — about 600ms total.
3. In parallel(), both promises are created first and awaited together with Promise.all — about 300ms.
4. A rejected promise makes await throw, so try/catch catches it like any other error.

Real-world use case#

Common mistakes#

Best practices#

• Wrap awaits in try/catch where you can handle the error meaningfully
• Start independent requests before awaiting them
• Use for…of with await for ordered, sequential work
• Check response.ok when using fetch — it does not reject on HTTP errors

Remember this#

Practice exercise#

1async function showUser() {
2  try {
3    const user = await fetchUser(1);
4    console.log(user.name);
5  } catch (e) {
6    console.log(e.message);
7  }
8}
9showUser();

Mini quiz#

Want more? Practise all JavaScript MCQs · JavaScript interview questions

Related topics#

My notes#

Saved in this browser.