ES10 的 for await...of 语句

在 JavaScript 中，循环是一项非常常见的操作。尤其对于前端应用程序而言，循环操作更显得尤为重要。但是对于异步的操作，循环引起的问题会变得更加突出。ES10 引入了 for await...of 语句来解决这个问题。

什么是 for await...of 语句？

for await...of 语句允许我们在异步迭代器上使用 for...of 语句，这个语句的使用方式与 for...of 语句类似，但是使用在可迭代的异步迭代器上。异步迭代器是通常返回 Promise 的对象，这个 Promise 将被 resolve() 为 {value, done} 的形式。

考虑到打印异步任务数组的示例，这里使用 for await...of 语句。

----- ----- - -- -- - ------ --- ----------------- -- - ------------- -- - ------------- ---- -- ------ --- -
----- ----- - -- -- - ------ --- ----------------- -- - ------------- -- - ------------- ---- -- ------ --- -
----- ----- - -- -- - ------ --- ----------------- -- - ------------- -- - ------------- ---- -- ------ --- -
----- --------- - ------- ------ -------

----- -------- -------------- -
    --- ----- ------ ------ -- ---------- -
        --------------------
    -
-

---------------

在这个例子中，executeTasks() 方法通过遍历 taskArray，并为每个任务输出其结果，将任务的结果存储在结果中。

如何使用 for await...of 语句？

在 JavaScript 中，我们通常将 Promise 实例返回给事件循环队列以获取结果。这时，当 Promise 被 resolve() 后，可以使用 then() 方法获取 Promise 的返回结果。但是，在某些情况下，事件循环队列可能不实时，从而导致 Promise 对象的返回超时。因此我们使用了 async/await 语法糖。async/await 可以将 Promise 实例返回给 await 表达式并等待 Promise 的解决。但是，await 只能用于单个异步方法。如果我们需要在多个异步方法中循环等待解决，for await...of 语句是必需的。

例如，在这段代码中，我们使用 fetch() 方法获取单词定义 JSON，并循环打印相关的例句。for await...of 循环等待单词定义 JSON 的解决。

----- ----- - ----------------------

----- -------- -------------------- -
  ----- -------- - ----- -------------------------------------------------------------------
  
  ----- ---- - ----- ----------------

  --- ----- ------ ------- -- -------------------------------------------- -
    --------------------------
  -
-

------------------------

在此示例中，getExampleData() 方法使用 node-fetch 获取单词定义的 JSON 数据，对数据进行解析并使用 for await...of 循环等待单词相关的例句。当此代码运行时，for await...of 循环等待单词定义的 Promise 对象被解决后才会运行。

结论

由于异步操作在现代前端应用程序中变得日益普遍，使用 for await...of 语句能够帮助我们更简单地进行异步操作。在本文中，我们学习了 for await...of 语句的用法，如何在对象上使用，以及为什么这是一个非常有用的功能。现在，我们已经准备好使用 for await...of 循环结构来编写简洁且可读性好的异步代码。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f3db2ff40ec5a964e548f6

阅读全文

猜你喜欢

  • 解决 Fastify 在 Windows 系统下运行遇到的问题

    Fastify 是一个快速、低开销、灵活的 Node.js Web 框架。它在速度方面有很好的表现，并且支持异步编程风格。然而，Fastify 在 Windows 系统下运行时，可能会出现一些问题。

    2 个月前
  • 如何在 PM2 中使用自定义脚本

    前言 PM2 是一个非常有用的进程管理工具，可以帮助我们方便地管理和监控 Node.js 应用程序。除了提供基本的进程管理功能外，PM2 还支持自定义脚本，让我们能够更加灵活和高效地管理我们的应用程序...

    2 个月前
  • ES9 中的数组原型方法 Array.prototype.filter()

    在 JavaScript 中，数组是一个非常重要的数据类型。它可以存储许多值，而且可以方便地对这些值进行操作。在 ES9 中，数组原型方法中增加了 Array.prototype.filter()，让...

    2 个月前
  • ES10 新增方法初探之 Array.prototype.flat()

    在 ES10 中，Array.prototype 上添加了一个新的方法：Array.prototype.flat()。本文将对这个新增方法进行详细的讲解，包括如何使用它以及它的指导意义。

    2 个月前
  • Tailwind 和 AngularJS 集成指南：如何更好地开发单页应用

    Tailwind 和 AngularJS 集成指南：如何更好地开发单页应用 前言 在前端开发领域中，AngularJS 是一款备受欢迎的框架。它提供了强大的数据绑定功能，使得在开发单页应用时变得更加容...

    2 个月前
  • 可扩展共享存储时的性能优化技巧

    可扩展共享存储时的性能优化技巧 随着现代应用程序的不断发展和增长，越来越多的前端开发人员需要考虑如何处理和优化数据的存储，尤其是在多用户协作的环境中。在这种情况下，可扩展共享存储是一种理想的解决方案。

    2 个月前
  • Mongoose 中的 BulkWrite 方法及其使用

    Mongoose 是一个 Node.js 的对象模型工具，它提供了一种非常强大的方式来操作 MongoDB 数据库。除了基本的 CRUD 操作之外，我们经常需要使用批量操作来提高操作效率。

    2 个月前
  • 分享：如何使用 Redux 实现可读可测试的代码

    引言 Redux 是一个流行的 JavaScript 应用程序状态管理工具。它允许我们使用单一数据存储来管理应用程序的状态，从而实现可读可测试的代码。在这篇文章中，我们将学习如何使用 Redux 创建...

    2 个月前
  • Kubernetes 中 Service 的具体实现原理探究

    Kubernetes 中的 Service 是一个非常重要的概念，它允许多个 Pod 共享同一个 IP 地址，并且能够提供负载均衡和服务发现的功能，这对于一个高可用和扩展性的应用程序是非常必要的。

    2 个月前
  • Vue.js 中错误处理的方法及注意事项

    Vue.js 是一个流行的 JavaScript 框架，开发者可以使用它快速构建复杂的单页应用程序。在开发 Vue.js 应用程序时，错误和异常处理是至关重要的部分。

    2 个月前
  • 如何使用 Next.js 创建单页面应用程序？

    Next.js 是一个基于 React 的轻量级框架，它可以帮助我们快速创建单页面应用程序。本文将详细介绍如何使用 Next.js 创建单页面应用程序，并附上实用的示例代码。

    2 个月前
  • Hapi 建立 WebSocket 客户端

    WebSocket 是一种实时的双向通信协议，可以让浏览器和服务器之间进行实时的数据交互。在前端开发中，我们可以使用各种 JavaScript 实现 WebSocket 客户端。

    2 个月前
  • 解决 Deno 中使用 Request 出现的 “self signed certificate” 问题

    在 Deno 中使用 Request 进行 HTTPS 请求时，有时会出现 “self signed certificate” 的问题。这是因为在 HTTP 通讯中，为了确保通讯安全，需要使用 SSL...

    2 个月前
  • 使用 ESLint 处理 TypeScript 的 Import 问题

    在前端开发中，TypeScript 已经成为了一种必备的开发语言。但是在使用 TypeScript 编写代码时，我们可能会遇到导入模块的问题。比如，我们可能会引入一个未被使用的模块，或者使用了不合规范...

    2 个月前
  • 使用 Enzyme 进行 React 动画组件的测试

    使用 Enzyme 进行 React 动画组件的测试 在 React 开发中，动画组件是一个非常重要的部分。然而，与其他组件相比，测试动画组件相对复杂。这是因为动画组件需要模拟组件在不同时间点的状态。

    2 个月前
  • 无障碍设计：如何为听障人士提供网站内容

    在现代社会中，网站已成为人们获取信息的主要途径。然而，对于听障人士来说，访问网站可能会面临一些困难。无障碍设计就是为了让所有人都能够访问和获取网站上的内容，包括那些听力有障碍的人。

    2 个月前
  • 如何使用Tailwind实现响应式卡片式布局设计

    前言 在现代网页设计中，卡片式布局已经成为了主流。它通过简单而直观的界面元素组合，可以帮助用户更快地了解网站的主要内容。而响应式设计则是一项非常重要的技术，它可以让网站在不同设备上自适应，让用户获得更...

    2 个月前
  • 使用 Mocha 和 Chai 报告测试输出

    Mocha 和 Chai 是 Javascript 中流行的测试框架，它们提供了一种易于使用的方式来写和运行测试用例，特别是在前端开发中使用频繁。在本文中，我们将详细讲解如何使用 Mocha 和 Ch...

    2 个月前
  • 在Vue项目中使用TypeScript的实践

    什么是TypeScript? TypeScript是JavaScript的超集，它允许开发人员编写可维护、拓展性高的JavaScript代码。TypeScript包含静态类型检查、类、接口、命名空间、...

    2 个月前
  • 如何在 Web Components 中优化字体加载

    Web Components 是一种新兴的前端技术，它可以让我们在网页中创建自定义的 HTML 标签，从而实现组件化的开发。字体是我们经常需要加载的资源之一，因此优化字体加载是 Web Compone...

    2 个月前

相关推荐

    暂无文章