ES7 中的 Symbol.asyncIterator-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，ES6 引入了 Symbol.iterator 来表示一个值是否可以被迭代，即是否可以使用 for...of 循环进行遍历。而在 ES7 中，又引入了一个新的迭代器接口 Symbol.asyncIterator，用于表示一种异步迭代器，它可以使得异步操作可以使用 for await...of 进行遍历，这对于一些需要异步操作的场景非常有用。

Symbol.asyncIterator 的用法

ES7 中的 Symbol.asyncIterator 的使用与 Symbol.iterator 非常相似，只不过它所代表的是异步迭代器。我们可以使用 Symbol.asyncIterator 来定义一个异步迭代器方法，然后用 for await...of 循环进行遍历。

下面是一个简单的例子，我们定义了一个异步迭代器方法 asyncIterator，该方法返回一个 Promise 对象，该 Promise 对象的 resolve 值为 { done: false, value: i }，其中 i 表示当前迭代器的迭代值。我们使用 for await...of 循环进行遍历，直到迭代器的状态变为 done。

// www.javascriptcn.com code example
const asyncIterator = {
  [Symbol.asyncIterator]() {
    let i = 0;
    return {
      async next() {
        if (i < 3) {
          return { done: false, value: i++ };
        }
        return { done: true };
      },
    };
  },
};

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

运行上面的代码，控制台将输出以下结果：

0
1
2

Symbol.asyncIterator 的指导意义

ES7 中的 Symbol.asyncIterator 可以使得我们在异步操作的情况下，使用 for await...of 进行遍历，从而使得我们的代码更加简洁易用，避免了一些回调嵌套的问题，提高了代码的可读性。

考虑以下的示例代码：

// www.javascriptcn.com code example
function loadImages(urls, callback) {
  let loaded = 0;
  const images = [];
  for (let i = 0; i < urls.length; i++) {
    const img = document.createElement('img');
    img.onload = () => {
      images[i] = img;
      loaded++;
      if (loaded === urls.length) {
        callback(images);
      }
    };
    img.onerror = () => {
      loaded++;
      if (loaded === urls.length) {
        callback(images);
      }
    };
    img.src = urls[i];
  }
}

上面的代码中，我们定义了一个 loadImages 函数，该函数用于加载图片资源，当所有的图片都加载完成后，会调用 callback 函数。这里我们使用了回调函数来实现异步操作的处理，代码可读性不太好。

使用 Symbol.asyncIterator 可以使得代码变得更加简洁易用，具体可以看下面的示例代码：

// www.javascriptcn.com code example
function loadImages(urls) {
  const images = [];
  return {
    async *[Symbol.asyncIterator]() {
      for (const url of urls) {
        const img = document.createElement('img');
        img.src = url;
        await new Promise((resolve, reject) => {
          img.onload = resolve;
          img.onerror = reject;
        });
        yield img;
      }
    },
  };
}

(async function () {
  for await (const img of loadImages([
    'https://picsum.photos/id/237/200/300',
    'https://picsum.photos/id/238/200/300',
    'https://picsum.photos/id/239/200/300',
  ])) {
    document.body.appendChild(img);
  }
})();

上面的代码中，我们定义了一个 loadImages 函数，该函数用于加载图片资源，该函数返回一个对象，该对象实现了 Symbol.asyncIterator 接口，该接口使用 for await...of 循环进行异步迭代，每次迭代返回一个 Promise 对象，该 Promise 对象的 resolve 值为当前加载完成的图片。

这样一来，我们的代码变得更加简洁易用，避免了回调嵌套，提高了代码的可读性，使得代码更加符合现代 JavaScript 中的异步编程标准。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cfdb1ae46428fe9ec05e18

ES7 中的 Symbol.asyncIterator

Symbol.asyncIterator 的用法

Symbol.asyncIterator 的指导意义

接着读