for-await-of 循环的使用，解决 ES8 中的异步迭代器问题-JavaScript中文网-JavaScript教程资源分享门户

for-await-of 循环的使用：解决 ES8 中的异步迭代器问题

在 ES8 中，提供了一种新的特性：异步迭代器。异步迭代器允许我们像普通迭代器一样遍历异步数据源，但是其迭代行为是异步的，可以处理异步数据源的 next() 方法并返回一个 Promise 对象。然而，在实际开发中，我们要如何使用异步迭代器来处理异步数据源呢？这时，for-await-of 循环就派上用场了。

for-await-of 循环的概述

for-await-of 循环用于遍历异步迭代器的接口，其语法格式为：

for await (let value of asyncIterable) {
  // 循环体
}

其中，asyncIterable 代表异步迭代器对象，let value 则用于保存异步迭代器返回的值。需要注意的是，for-await-of 循环只能在 async 函数中使用。

下面，我将结合一个具体的异步数据源示例来展示如何使用 for-await-of 循环来处理异步数据源。

具体示例

我们考虑一个简单的异步数据源示例，假设我们有一个通过 Promise 获取后端 API 接口的封装函数 getAPI(url)，现在需要通过异步迭代器来遍历该 API 返回的 JSON 数据。那么，我们该如何实现呢？

首先，我们需要定义一个异步迭代器接口，其 next() 方法返回一个 Promise 对象。示例代码如下：

const apiIterator = {
  next() {
    return getAPI('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(data => ({
        value: data,
        done: false
      }))
      .catch(() => ({
        value: undefined,
        done: true
      }))
  },

  [Symbol.asyncIterator]() {
    return this
  }
}

在上述代码中，我们通过 getAPI() 函数来获取后端 URL 中的 JSON 数据，将其包装为一个包含 value 和 done 属性的对象，并通过 Promise 对象来返回该对象。当遍历完所有数据时，我们通过 done 属性返回 true。

接下来，我们再定义一个 async 函数用于遍历异步迭代器，该函数中使用 for-await-of 循环来遍历该异步迭代器。如果 JSON 数据获取失败，则将继续遍历下一个数据源，并打印异常信息。示例代码如下：

async function getDataFromAPI() {
  try {
    for await (let data of apiIterator) {
      console.log('data:', data)
    }
  } catch (err) {
    console.error('Error:', err)
  }
}

最后，我们只要调用 getDataFromAPI() 函数即可实现循环遍历 API 返回的 JSON 数据。

总结

本文中，我们介绍了 for-await-of 循环在异步迭代器中的应用。通过 for-await-of 循环，我们可以遍历异步迭代器中的数据，并通过 async 和 await 来实现异步处理。希望本文能帮助读者掌握 for-await-of 循环的使用，从而通过异步迭代器来处理异步数据源。

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