ES8 的 async 函数和 Generator 函数区别分析

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

在 JavaScript 的异步编程中,ES6 为我们带来了很重要的一步,包括 Promise、Generator 和 async/await 函数。其中,Generator 函数和 async 函数被广泛应用于日常开发中。本文将对这两种函数进行深入的区别分析,让读者更好的理解它们。

Generator 函数的使用与规则

Generator 函数是 ES6 其中一个重要的新特性。一个常规的函数一次性执行完毕返回一个值,而 Generator 函数产生的是一个可迭代的对象,通过回调(next())的方式来控制函数执行的方式。

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

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

async/await 的使用与规则

async 函数是 ES8 中引入的一个关键字。async 函数内部默认返回一个 Promise 对象。和 Generator 函数一样,async 函数中的代码也可以使用 yield 进行控制。

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

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

区别分析

除了语法的不同,二者之间在代码的表现和可扩展性上也存在明显的差异:

1. 内部执行器

Generator 函数的内部执行器是手动进行回调控制的,而 async 函数的控制器则是通过自动完成异步代码来实现的。

2. 外部影响

Generator 函数的执行过程可以由外部控制,而 async 函数默认不行。但是,async 函数本质上是 Promise 的语法糖,所以在某些应用场景中,它们的使用方式存在一些复杂情况。

3. 返回值

Generator 函数经过回调控制返回的是一个可迭代对象,可以在函数体内任何时候通过 yield 来终止执行,并随时返回值;而 async 函数经过回调控制返回的是 Promise 对象,并且 Promise 实例的 then 方法能够接受该实例返回的任何值。

因此,当需要使用大量的异步编程时,async 函数将是最佳选择;而当处理通用的异步控制流程时,就应该使用 Generator 函数。

示例代码

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

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

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

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

上述代码中,我们通过 Generator 函数来获取 JSONPlaceholder 的数据。这种方式将所有步骤明确地暴露在外,控制更加灵活。

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

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

而在成为 Async 函数调用后,会自动执行异步请求。因此,在需要执行多个异步批处理的情况下,它比 Generator 函数更加清晰。

结论

在实际开发过程中,async/await 通常比 Generator 函数更容易维护和编写。Async 函数能够消除与 Generator 函数相关的大多数问题和限制,使代码更加简洁易懂。

无论您选择哪种方式,这两种方式都是通过将异步控制流程显式地表现出来,从而使代码更加易于理解和维护。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6718e581ad1e889fe22ec250


猜你喜欢

  • 如何使用 Hapi 实现微信公众号开发中的签名验证

    随着移动互联网时代的到来,微信公众号成为了企业宣传、推广和客户服务的重要渠道之一。在开发微信公众号时,签名验证是必不可少的一步,它保证了微信服务器和第三方应用之间通信的安全性。

    17 天前
  • React Native 中使用 Enzyme 测试组件报错解决方案

    React Native 是一种广泛使用的仿原生应用的跨平台开发框架,而 Enzyme 是一个流行的 React 测试库,常用于在 React Native 上测试组件。

    17 天前
  • Headless CMS 在开发流程中的优势与必要性剖析

    Headless CMS 是一种新兴的内容管理系统,它与传统的 CMS 不同之处在于,Headless CMS 只提供 API 接口,不关心如何呈现这些内容。本文将从以下几个方面介绍 Headless...

    17 天前
  • Material Design 中的图片加载技巧

    在Web应用程序以及移动应用程序的设计中,图片通常是不可或缺的一部分。提供高质量的图片可以增强应用程序的可视化体验,同时也有助于传达重要信息。然而,大量的图片加载可能影响用户体验,特别是当图像库过大时...

    17 天前
  • CSS Grid 实现响应式图片库布局

    CSS Grid 已经成为一种非常流行的布局技术,可以帮助我们快速地构建复杂的网页布局。在本文中,我们将会介绍如何使用 CSS Grid 实现响应式图片库布局。本文将包含以下内容: 什么是 CSS ...

    17 天前
  • Web Components 技术如何实现组件之间的通信

    Web Components 技术已经成为了开发现代化前端应用程序的主流。这项技术使得前端组件可以被重复利用,从而提高了应用程序的可维护性和可扩展性。但是,一个应用程序不仅仅只是一个集合了一堆组件的容...

    17 天前
  • Lucene 索引性能优化

    Lucene 是一个用于信息检索的 Java 库。它提供了高效的全文搜索、分析、过滤等功能,广泛应用于各种搜索引擎、文档管理系统等领域。在使用 Lucene 开发搜索引擎时,优化索引性能是一个非常重要...

    17 天前
  • 如何在 Custom Elements 中正确地使用 CSS 伪元素?

    在前端开发中,Custom Elements 是一个很有用的特性,它能够让开发者自定义 HTML 元素,并通过 JavaScript 进行扩展。但是,使用 Custom Elements 时需要注意一...

    17 天前
  • Redis 集群内的数据备份机制介绍

    前言 Redis 是一个快速、开源的键值对存储数据库。它能存储多种数据结构,如字符串、哈希表、列表、集合等等。在分布式系统中,为了提高系统的可用性和容错性,Redis 提供了集群模式来支持多节点的数据...

    17 天前
  • 在 Express.js 中实现 Solr 搜索引擎的集成

    Solr 搜索引擎是一种基于 Apache Lucene 的开源搜索引擎,提供了丰富的搜索特性和扩展性。在前端开发中,我们经常需要在网站或者应用中实现搜索功能,而 Solr 搜索引擎是一个不错的选择。

    17 天前
  • 如何提升 RESTful API 的性能

    RESTful API 是 Web 应用程序中最常用的 API 之一。尽管它非常受欢迎,但如果不正确实现,它可能会成为 Web 应用程序性能的瓶颈。 在本文中,我们将讨论如何通过几种优化技术来提高 R...

    17 天前
  • ES8 的新特性:Object.entries() 与 Object.values() 方法

    在 JavaScript 中,Object 是一个非常重要的对象类型。在 ES8 中,Object 对象新增了两个非常有用的方法:Object.entries() 与 Object.values()。

    17 天前
  • 前端响应式设计中无法避免的兼容性问题

    在现代 Web 开发中,响应式设计已经成为了不可或缺的一部分。使用响应式设计可以使页面在不同的设备上展现出最佳的效果,并提供更好的用户体验。但在实践中,我们不可避免地会遇到一些兼容性问题。

    17 天前
  • 使用 ECMAScript 2015(ES6)中的 Map 对象实现键值对

    ECMAScript 2015 (ES6)是 JavaScript 的一个重大更新版本,它增加了许多新的语言功能和 API。其中一个比较实用的特性是 Map 对象,它是一种可以存储键值对的集合,类似...

    17 天前
  • React 与 TypeScript:如何正确地使用 hooks?

    React 是一种 JavaScript 库,用于构建用户界面。在 React 中,hooks 是一个重要的概念,它可以让我们在函数组件中使用状态和生命周期钩子,从而使代码更简洁且易于维护。

    17 天前
  • 如何正确配置 Babel

    Babel 是一个广泛使用的 JavaScript 转换器,它可以将 ES6(ECMAScript 2015)及以上语法转换成向后兼容的 JavaScript 代码。

    17 天前
  • 解决 Jest 测试中遇到缺少 polyfills 的问题

    在前端开发中,测试是不可或缺的环节。而 Jest 作为一款常用的 JavaScript 测试框架,被广泛用于前端开发中。然而,在使用 Jest 进行测试时,我们有时会遇到缺少 polyfills 的问...

    17 天前
  • Server-sent Events 短连接可能会出现的问题及解决方案

    引言 在前端实时通信中,Server-sent Events (SSEs) 可以提供一种简单而高效的方法。SSEs 允许 Web 应用程序通过单向连接从服务器接收事件流。

    17 天前
  • ECMAScript 2016:使用 Built-in 对象节约代码写法

    ECMAScript 2016:使用 Built-in 对象节约代码写法 在前端开发中,使用 ECMA2016 的 Built-in 对象可以节省很多代码,而且提供很多方便的操作方式。

    17 天前
  • 无障碍设计实践:使用 Narrator 工具为 Windows 应用进行屏幕阅读器适配

    引言 随着信息技术和互联网的发展,我们的生活越来越数字化、智能化。这也意味着我们需要更多的无障碍设计来帮助那些使用屏幕阅读器等辅助工具的人。 在开发 Windows 应用程序时,我们可以使用 Narr...

    17 天前

相关推荐

    暂无文章