利用 ECMAScript 2019 对 for await...of 支持实现异步迭代任务-JavaScript中文网-JavaScript教程资源分享门户

前言

在日常的前端开发中，我们经常需要处理异步任务，例如从后端获取数据、处理用户输入等。同时，我们也需要迭代异步任务的结果，例如将数据渲染到页面上或者将用户输入提交到后端。在过去，我们可能需要使用回调函数或者 Promise 来处理异步任务，但是这种方式往往会导致代码结构复杂、可读性差等问题。而在 ECMAScript 2019 中，引入了 for await...of 语法，使得我们可以更加方便地处理异步迭代任务。

for await...of 语法

下面是 for await...of 语法的基本用法：

async function asyncFunc() {
  const asyncIterable = getAsyncIterable(); // 获取异步可迭代对象
  for await (const value of asyncIterable) {
    // 处理异步任务的结果
  }
}

在上面的代码中，我们先通过 getAsyncIterable() 函数获取一个异步可迭代对象，然后使用 for await...of 语法迭代异步任务的结果。在每次迭代时，for await...of 会等待异步任务完成，并将任务的结果赋值给 value 变量，然后执行循环体中的代码。

需要注意的是，for await...of 语法只能用于异步任务的迭代，如果我们要迭代同步任务的结果，应该使用 for...of 语法。

示例代码

下面是一个使用 for await...of 语法处理异步任务的示例代码：

// javascriptcn.com 代码示例
async function fetchUrls(urls) {
  const results = [];
  for await (const url of urls) {
    const response = await fetch(url); // 发起异步请求
    const result = await response.json(); // 解析异步请求的结果
    results.push(result); // 将结果保存到数组中
  }
  return results;
}

const urls = [
  'https://api.github.com/users/john/repos',
  'https://api.github.com/users/jane/repos',
  'https://api.github.com/users/bob/repos'
];

fetchUrls(urls).then(results => {
  console.log(results);
});

在上面的代码中，我们定义了一个 fetchUrls() 函数，它接受一个 urls 数组作为参数，该数组包含了需要发起异步请求的 URL。在函数内部，我们使用 for await...of 语法迭代 urls 数组中的每个 URL，并发起异步请求获取数据。在每次迭代时，for await...of 会等待异步请求完成，并将请求的结果解析为 JSON 格式。最后，我们将所有的结果保存到一个数组中，并返回该数组。

需要注意的是，在上面的示例代码中，我们使用了 fetch() 函数来发起异步请求。fetch() 函数返回的是一个 Promise 对象，因此我们需要使用 await 关键字来等待异步请求的完成，并获取请求的结果。如果你需要了解更多关于 fetch() 函数的知识，可以参考 Fetch API。

总结

for await...of 语法是 ECMAScript 2019 中引入的新语法，它可以用于迭代异步任务的结果。与 for...of 语法类似，for await...of 也是基于可迭代对象（Iterable）实现的。不同的是，for await...of 支持异步可迭代对象（AsyncIterable），并且在迭代时会等待异步任务完成。使用 for await...of 语法可以使得我们更加方便地处理异步迭代任务，避免了使用回调函数或者 Promise 导致的代码结构复杂、可读性差等问题。

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