JavaScript Async Iteration

Written by Swapnil RajaPublished 24 Aug 2026

for await of loops over values that arrive one at a time, each behind a promise.

A normal generator yields values instantly.

An async generator can await before yielding each one.

Example

javascript

async function* countSlowly(max) {
  for (let i = 1; i <= max; i++) {
    await Promise.resolve();
    yield i;
  }
}

async function run() {
  const values = [];
  for await (const n of countSlowly(3)) {
    values.push(n);
  }
  return values.join(",");
}

run().then(function (result) {
  console.log(result);
});

PreviousJavaScript Lazy Sequences NextJavaScript Performance Basics

Example

javascript

async function* fetchEach(items) {
  for (const item of items) {
    const value = await Promise.resolve(item.toUpperCase());
    yield value;
  }
}

async function run() {
  const results = [];
  for await (const value of fetchEach(["a", "b"])) {
    results.push(value);
  }
  return results.join(",");
}

run().then(function (result) {
  console.log(result);
});

Example

javascript

async function* source() {
  yield 1;
  await Promise.reject(new Error("stream failed"));
  yield 2;
}

async function run() {
  const values = [];
  try {
    for await (const n of source()) {
      values.push(n);
    }
  } catch (error) {
    values.push("caught: " + error.message);
  }
  return values.join(",");
}

run().then(function (result) {
  console.log(result);
});

Example

javascript

async function* mixed() {
  yield 1;
  yield await Promise.resolve(2);
  yield 3;
}

async function run() {
  const values = [];
  for await (const n of mixed()) {
    values.push(n);
  }
  return values.join(",");
}

run().then(function (result) {
  console.log(result);
});

Example

javascript

function* plain() {
  yield 1;
  yield 2;
}

async function run() {
  const values = [];
  for await (const n of plain()) {
    values.push(n);
  }
  return values.join(",");
}

run().then(function (result) {
  console.log(result);
});

Example

javascript

async function* chunks() {
  yield "first chunk";
  yield "second chunk";
}

async function run() {
  const parts = [];
  for await (const chunk of chunks()) {
    parts.push(chunk);
  }
  return parts.join(" + ");
}

run().then(function (result) {
  console.log(result);
});

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Async Iteration</title>
</head>
<body>

  <h1>Async Iteration</h1>

  <p id="out">Loading...</p>

  <script>
    async function* fetchNames() {
      const names = ["Ada", "Grace", "Alan"];
      for (const name of names) {
        await new Promise(function (resolve) { setTimeout(resolve, 10); });
        yield name;
      }
    }

    async function run() {
      const found = [];
      for await (const name of fetchNames()) {
        found.push(name);
      }
      document.getElementById("out").textContent = found.join(", ");
    }

    run();
  </script>

</body>
</html>

JavaScript Async Iteration

Example

async function* and for await

Syntax

Each Value Is Awaited

Example

Handling a Rejected Value

Example

for await Also Accepts Plain Values

Example

A Normal Generator Also Works

Example

Where This Is Used

Example

Complete Example

Try It Yourself

Important Points

Conclusion