理解 ES2017 中的 For await-of 循环

在 ES2017 中，新增了一个 For await-of 循环，它可以用来遍历异步迭代器（AsyncIterator），并在每个异步迭代器返回一个 promise 时暂停迭代，等待 promise 执行完毕后再继续迭代。

异步迭代器

异步迭代器是一个实现了 Symbol.asyncIterator 方法的对象，它可以返回一个异步迭代器对象，该对象实现了 next 方法，返回一个 Promise 对象。当 Promise 对象 resolve 时，返回一个包含 value 和 done 属性的对象，其中 value 表示迭代器的下一个值，done 表示是否已经迭代完成。

示例代码：

// javascriptcn.com 代码示例
const asyncIterable = {
  [Symbol.asyncIterator]() {
    let i = 0;
    return {
      async next() {
        if (i < 3) {
          return { value: i++, done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
};

(async function () {
  for await (const num of asyncIterable) {
    console.log(num);
  }
})();

输出结果：

0
1
2

For await-of 循环

For await-of 循环可以遍历异步迭代器，语法和普通的 For of 循环类似，只是使用了 await 关键字来等待异步迭代器返回的 Promise 对象。

示例代码：

// javascriptcn.com 代码示例
async function* asyncGenerator() {
  yield Promise.resolve(1);
  yield Promise.resolve(2);
  yield Promise.resolve(3);
}

(async function () {
  for await (const num of asyncGenerator()) {
    console.log(num);
  }
})();

输出结果：

1
2
3

指导意义

For await-of 循环为异步编程提供了更加方便的遍历异步迭代器的方式，可以使代码更加简洁、易于理解。但需要注意的是，由于 For await-of 循环会等待异步迭代器返回的 Promise 对象，所以在使用时需要确保异步迭代器能够及时返回 Promise 对象，否则会导致循环无法继续。

总结

通过本文的介绍，我们了解了 ES2017 中的 For await-of 循环，以及如何使用它遍历异步迭代器。同时，我们也了解了异步迭代器的定义和作用，以及在使用 For await-of 循环时需要注意的事项。希望本文能够对您理解异步编程有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6567399ad2f5e1655d019f5b