ECMAScript 2019 中如何将 Promise 转换为 async 和 await

面试官:小伙子,你的数组去重方式惊艳到我了

ECMAScript 2019 中如何将 Promise 转换为 async 和 await

在 JavaScript 开发中,Promises 是一种常用的异步编程方法,它让我们可以更容易地处理异步操作和代码复杂性。但是,Promises 仍然需要大量的回调函数和嵌套,很难处理逻辑,比如说错误处理和多个异步操作组合。因此,ES2017 引入了 async 和 await 关键字,它们提供了更简单和可读的方式来处理异步代码。本文将介绍如何将 Promise 转换为 async 和 await,并给出相关的示例代码。

  1. 什么是异步编程?

在 JavaScript 中,我们经常需要处理异步操作,比如说从服务器获取数据、读取文件等等。例如:

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

上述代码包含三个语句,第一个语句 console.log('Start') 会立即执行,输出 Start。第二个语句会延迟 1 秒执行,输出 End。第三个语句会立即执行,输出 Next。因此,上述代码执行的结果是:

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

由此可见,异步操作可能会在后面执行,代码的执行顺序并不是我们期望的顺序。在异步编程中,我们需要等待异步操作完成之后再执行后续的代码。

  1. Promises

Promises 是用于处理异步操作的对象。它的基本思想是在异步操作完成时执行某些代码。Promises 可以解决回调函数带来的嵌套和可读性差的问题。

一个 Promise 有三种状态:pending、resolved、rejected。在 promise 进入 resolved 或 rejected 状态之前,称为 pending 状态。当 promise 从 pending 状态过渡到 resolved 状态时,它调用相应的回调函数来处理成功的值。当 promise 从 pending 状态过渡到 rejected 状态时,它调用相应的回调函数来处理错误信息。

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

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

上述代码中,我们创建了一个 Promise 对象,它是一个异步操作,并且随机返回成功或失败。当 Promise 进入 resolved 状态时,调用 .then() 方法来打印成功的值。当 Promise 进入 rejected 状态时,调用 .catch() 方法来打印错误信息。

  1. async 和 await

ES2017 引入了 async 和 await 两个关键字,它们构成了一种更简单和可读的异步编程方式。async 关键字用于声明一个异步函数,它会自动返回一个 Promise 对象。await 关键字用于暂停异步函数的执行,直到 Promise 进入 resolved 或 rejected 状态。await 关键字只能在 async 函数中使用。

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

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

上述代码中,我们定义了一个异步函数 getWeather(),它使用了 await 关键字来等待 fetch() 函数的结果。fetch() 函数是一种异步函数,它返回一个 Promise 对象,因此我们可以在 getWeather() 函数中使用 await 来暂停执行,直到 Promise 进入 resolved 状态。getWeather() 函数返回一个 Promise 对象,并可以使用 .then().catch() 方法来处理结果和错误。

  1. 将 Promise 转换为 async 和 await

我们可以使用 async 和 await 来将 Promise 转换为更可读和简单的代码。我们可以将 Promise 对象赋值给变量并使用 await 等待 Promise 结果。下面是示例代码:

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

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

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

上述代码中,我们定义了一个 Promise 对象 promiseExample(),它会等待 1 秒后返回一个字符串 'Promise Example'。然后,我们定义了一个 async 函数 asyncExample(),它使用了 await 关键字等待 promiseExample() 函数的返回值。在 asyncExample() 函数中我们可以像普通的同步函数一样访问变量 result

  1. 结论

在 JavaScript 中,异步编程是必不可少的,而 async 和 await 关键字提供了简单和可读的方式来处理异步操作。使用 async 和 await 可以消除一些常见的异步编程问题,比如说回调函数和异步操作的嵌套。我们应该尽可能地使用 async 和 await,以提高代码的可读性和可维护性。

参考资料:

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


猜你喜欢

  • Cypress 自动化测试中的 API 测试

    Cypress 是一款流行的前端自动化测试框架,可以测试 Web 应用的各个方面。除了 UI 测试外,Cypress 也可以进行 API 测试。在本文中,将介绍如何使用 Cypress 进行 API ...

    9 天前
  • 如何避免 XSS 攻击?

    跨站脚本攻击(XSS)是一种常见的网络攻击,特别危险的是通过 JavaScript 代码注入到网页中,盗取用户的隐私信息,例如 cookie 和密码。在前端开发中,我们应该采取一些方法来防止这种类型的...

    9 天前
  • 如何正确使用 ES8 中新增的 Array.prototype.includes() 方法

    随着 JavaScript 开发在前端领域的广泛应用,ES8 中新增的 Array.prototype.includes() 方法在开发过程中也越来越受到关注。该方法可以返回一个布尔值,表示数组是否包...

    9 天前
  • CSS Reset 与框架的兼容性问题

    CSS Reset 是一种用于在网页浏览器间创建一致性的 CSS 规则集合。它在编写 CSS 样式表时允许您从空白状态开始构建,而不必考虑大多数浏览器的默认样式。然而,当我们想要将 CSS Reset...

    9 天前
  • AngularJS 中实现单页应用程序的五种最佳方法

    AngularJS 是一种强大而灵活的前端框架,尤其擅长开发单页应用程序(SPA)。在这篇文章中,我们将介绍 AngularJS 中实现 SPA 的五种最佳方法,并讲解每种方法的优劣以及实现的具体细节...

    9 天前
  • Chai 库中 expect 和 should 使用场景对比

    Chai 是一个流行的 JavaScript 断言库,常用于前端测试环境。它有三种断言风格:expect、should 和 assert。本文主要比较 expect 和 should 使用场景的不同,...

    9 天前
  • 如何在使用 Enzyme 测试 React 组件时模拟异步数据请求?

    在使用 React 进行前端开发时,我们常常需要使用异步数据请求来获取后端数据。而在测试 React 组件时,如何模拟异步数据请求来测试组件的正确性呢?这就需要用到 Enzyme,一个用于 React...

    9 天前
  • 如何使用 React 封装 Web Components

    在前端开发中,React 是目前最热门的 JavaScript 库之一。如果你熟悉 React,并且想要将其用于封装 Web Components,则本文将提供一些指导和示例。

    9 天前
  • PM2 之进程守护

    前言 现在,很多公司都会选择使用 PM2 来进行进程管理和守护。PM2 是一个强大的进程管理工具,可以方便地管理和监控你的 Node.js 应用程序。本文将介绍 PM2 的使用方法以及进程守护的实现。

    9 天前
  • 无障碍设计与 AR 技术的结合 —— 探索未来的视觉体验

    随着 AR 技术不断发展,我们已经看到了如此多优秀的 AR 应用,它们给我们带来了不同凡响的体验,使得我们对于未来视觉体验有了更加丰富的想象。然而,即使 AR 技术可以为用户带来更加逼真的体验,但如果...

    9 天前
  • Next.js 与 Firebase 集成指南:让您的应用程序更快、更高效

    在前端开发中,我们经常需要使用各种工具和技术来保证我们的应用程序能够运行得更快、更高效。在这方面,Next.js 和 Firebase 无疑是相当值得使用的两个工具。

    9 天前
  • React Hooks 与 Redux:配合构建更好的应用

    React Hooks 和 Redux 是两个前端领域非常流行且不可缺少的技术,它们的组合使用可以大幅提高应用的可维护性、可拓展性和可读性。本文将介绍如何使用 React Hooks 和 Redux ...

    9 天前
  • 面对 Angular 常见的 10 个错误,你需要这样解决

    Angular 是一个流行的前端 JavaScript 框架,它为应用程序提供了一种以模块化方式组织代码的方法,使其更容易维护和扩展。然而,在使用 Angular 时,您可能会遇到一些常见的错误。

    9 天前
  • ES8(ES2017)中的尾调用优化与栈溢出问题的解决方案

    在过去的几年中,JavaScript语言一直是Web前端开发中的主流。随着ES8(即ES2017)的到来,JavaScript的实现又迎来了一次新的变化,其中尾调用优化和解决栈溢出的问题是开发者所关注...

    9 天前
  • Deno 中出现 cannot find module 的解决方法

    Deno 是一个现代化的 JavaScript/TypeScript 运行时环境,可以用于构建高效的 Web 应用程序和命令行工具。然而,有些情况下,当我们在 Deno 中使用模块时,可能会遇到 "c...

    9 天前
  • 如何使用 Mocha 和 Sinon 来测试 Node.js 应用

    Mocha 和 Sinon 是 Node.js 应用中常用的测试框架和库。它们可以协同工作来帮助我们编写测试代码,以验证我们的程序在不同情况下表现是否符合预期。本文将介绍如何使用 Mocha 和 Si...

    9 天前
  • 在 Node.js 中如何使用 Multer 实现文件上传?

    在 Node.js 中如何使用 Multer 实现文件上传? Node.js 作为一种流行的服务器端技术,充分发挥了 JavaScript 的优势,受到了广泛的关注和支持。

    9 天前
  • MongoDB 中导入数据出现 “Invalid character error” 的解决方案

    在使用 MongoDB 存储大数据量时,我们常常需要通过导入数据来快速地初始化数据库。然而,当我们在导入数据时,很容易遇到 “Invalid character error” 的错误,导致导入失败。

    9 天前
  • Angular2 项目使用 TypeScript 创建时可能遇到的问题及解决方法

    Angular2 是一款流行的前端框架,它是使用 TypeScript 编写的。TypeScript 是一种超集语言,它扩展了 JavaScript,并且具有强类型和面向对象的特性。

    9 天前
  • 如何使用 Next.js 优化动态路由页面的性能

    Next.js 是一个流行的 React 框架,它提供了一种简单的方式来构建服务器渲染和静态站点应用程序。其中一个最强大的功能是动态路由,它使开发人员可以使用路由参数来构建动态页面。

    9 天前

相关推荐

    暂无文章