如何使用 ECMAScript 2021 中的 Promise 对象

阅读时长 6 分钟读完

Promise 是一种异步编程的解决方案,可以有效地避免 JavaScript 中的回调地狱。该对象最初由社区提出,后来被 ES6 引入并成为 ES2021 语言规范的一部分,目前已成为常用的前端开发工具之一。在本文中,我们将探讨如何使用 ECMAScript 2021 中的 Promise 对象,并给出具体的实例演示。

Promise 简介

Promise 是一个对象,代表异步操作的最终完成或失败,返回的结果是一个唯一的值。Promise 的状态分为三种:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。当一个 Promise 对象的状态从 pending 变为 fulfilledrejected,则称为 Promise 对象“已解决”(resolved)。如下代码示例:

Promise 基础用法

大多数 Promise 实例的使用方式都是类似的。Promise 构造函数接受一个函数作为参数,该函数接受两个函数参数 resolvereject。当 Promise 被 resolve 和 reject 调用时,该 Promise 实例的状态就会改变。如下是一个简单的 Promise 实例,返回一个字符串“Hello World”,并输出到控制台:

当 Promise 对象状态从 pending 变为 fulfilled,then 方法会调用成功的回调函数,而当状态从 pending 变为 rejected,则会调用失败的回调函数。then 方法接受两个回调函数,一个成功回调函数和一个失败回调函数。如下是一个带有异常处理的 Promise 实例:

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

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

Promise 链式操作

Promise 可以实现链式操作,即多个 then 方法的调用。在前一个 then 方法中,可以返回一个新的 Promise 对象,实现链式调用。如下是一个返回 Promise 实例的方法,该方法用于模拟异步请求:

这里可以使用链式调用实现对多个请求的处理:

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

Promise.all() 方法

Promise.all 方法接受一个 Promise 数组,如果数组中所有 Promise 都已经 resolve,则返回一个 resolve 状态的 Promise,否则返回一个 reject 状态的 Promise。如下代码示例:

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

Promise.race() 方法

Promise.race 方法接受一个 Promise 数组,只有数组中的第一个 Promise resolve 或 reject 状态,该方法就会返回一个 resolve 或 reject 状态的 Promise。如下代码示例:

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

总结

在前端开发中,异步操作是常见的需求。Promise 通过其优良的异步解决方案,简化了从 Promise 实例的创建、链式调用以及 Promise.all 和 Promise.race 方法的使用等操作,使得异步操作更加轻松自如。使用 Promise 可以大大提高开发效率,建议前端开发者学习并掌握该技术。

参考资料

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/646e708b968c7c53b0ce2b5e

纠错
反馈