Typorithm · medium

async / await

async-awaitjavascript-coreasyncawaiterror-handling
Saved on this device
Full lesson · 8 learning steps Open any exercise for focused practice
1

Step 1 of 8 · intro card

Learn async / await

0%

Async

An async function always returns a promise. await pauses until a promise fulfills and unwraps its value, and try/catch turns a rejected promise into a normal catchable error.

Marking a function async makes it return a promise no matter what; a plain return value becomes a fulfilled promise and a thrown error becomes a rejected one.

await may only appear inside an async function. It pauses execution until the awaited promise settles, then evaluates to the fulfilled value — so await fetch(url) gives you the response directly instead of a promise.

Because a rejected awaited promise throws, you wrap awaits in try/catch: any failure from fetch or res.json() lands in the catch block as a normal error.

01

async functions always return a promise.

02

await unwraps a promise's fulfilled value.

03

try/catch handles rejected awaited promises.

async function load(url) {
  try {
    const res = await fetch(url);
    const data = await res.json();
    return data;
  } catch (e) {
    console.error(e);
  }
}

Read the implementation

Connect each part of the code to the concept before you type.

1. Declare async

An async function always returns a promise, so callers can await or chain it.

async function load(url) {

2. Guard with try

try wraps the awaited calls so a rejection becomes a catchable error.

try {

3. Await fetch

await pauses the function until the fetch promise fulfills, unwrapping the response.

const res = await fetch(url);

4. Await json

await unwraps the second promise from res.json() into the parsed data.

const data = await res.json();

5. Catch errors

A rejected awaited promise throws here, where catch handles it.

} catch (e) {

A complete learning loop

01

Understand

Read the concept map and follow the code breakdown.

02

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

03

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.

async / await: Lesson & Practice · Typorithm | ApplyDjinn