手写 Promise 的流程

本文将会介绍手写 Promise 的流程。Promise 是 JavaScript 中一种异步编程的解决方案。在异步操作中，使用回调函数来传递结果，但是回调函数嵌套过多，代码可读性较差。使用 Promise 可以解决这个问题。

什么是 Promise？

Promise 是一种 ECMAScript 6 引入的标准化异步编程的解决方案。Promise 代表一个异步操作的最终完成/失败及其结果值。

Promise 具有以下三个状态：

  • pending（进行中）: 初始状态，可以转化为 fulfilled 或 rejected。
  • fulfilled（已成功）: 操作成功完成，且有一个返回值，可以访问其对应的返回值。
  • rejected（已失败）: 操作失败，有一个原因（reason）可以访问。

步骤一：创建 Promise 类

首先，创建一个 Promise 类，它包含一个构造函数，构造函数中传入一个函数参数executor，这个函数参数executor，是一个函数参数，就是整个 Promise 异步执行的地方。

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

步骤二：定义 Promise 状态和值

在 Promise 类中，需要定义 Promise 的状态、值和回调函数，如下代码所示：

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

    -- --
  -
-

步骤三：定义 resolve 和 reject 方法

在 Promise 类中，需要定义 resolve 和 reject 方法，用于改变 Promise 对象的状态和值。resolve 方法表示异步操作成功时将状态改为fulfilled，异步操作失败时将状态改为 rejected。

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

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

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

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

步骤四：定义 then 方法

then 方法用于在 Promise 对象状态改变时注册回调函数，then 方法接收两个参数 onFulfilled 和 onRejected。onFulfilled 表示 Promise 对象变为 fulfilled 状态时的回调函数；onRejected 表示 Promise 变为 rejected 状态时的回调函数。

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

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

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

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

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

步骤五：定义 resolutionProcedure 方法

在 then 方法中的 onFulfilled 和 onRejected 的回调函数中，需要处理 Promise 的值和新 Promise 的状态。如果返回值是一个 Promise 对象，需要等待执行完后，再处理新 Promise 对象的状态和值。resolutionProcedure 方法就是用来处理这个过程。

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

示例代码

使用手写的 Promise，实现一个异步加载图片的方法 loadImg。

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

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

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

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

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

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

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

总结

本文介绍了手写 Promise 的流程，包括创建 Promise 类、定义 Promise 状态和值、定义 resolve 和 reject 方法、定义 then 方法和定义 resolutionProcedure 方法。使用手写的 Promise，可以实现异步操作的解决方案，提高代码的可读性。

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

阅读全文

猜你喜欢

  • Angular 中使用 Observable 来实现异步数据流处理

    在 Angular 中，你可能需要处理一些异步数据流，比如从后端服务器请求数据或者从用户事件中获取数据。为了处理这些数据流，我们可以使用 Angular 提供的 Observable 类型。

    1 年前
  • ES7 中的 Object.getOwnPropertyDescriptors 方法在对象深拷贝中的应用

    在 JavaScript 开发中，对象深拷贝（对象拷贝到新的内存地址）是一个常见的需求。在 ES7 之前，我们通常使用 stringify 和 parse 方法实现对象深拷贝，这种方法的缺陷是无法拷贝...

    1 年前
  • 如何使用 ES11 的 import() 动态加载模块

    在前端开发中，动态加载模块是一个很重要的功能。ES11 的 import() 方法提供了一种新的方式来实现动态加载，它可以在运行时根据需要加载模块，而不是在编译时就加载所有的模块。

    1 年前
  • Fastify 应用程序如何实现两步验证

    前言 随着互联网的普及，保护用户信息的安全变得越来越重要。两步验证是一种非常有效的提高用户信息安全的方法。本文将介绍如何在 Fastify 应用程序中实现两步验证，以帮助开发人员在保护用户账户方面更上...

    1 年前
  • RxJS 实现 WebSocket 的实时消息推送

    本文主要介绍如何使用 RxJS 库实现 WebSocket 的实时消息推送。RxJS 是一个功能强大的响应式编程库，它可以轻松地处理异步数据流。 WebSocket 简介 WebSocket 是一种全...

    1 年前
  • Serverless 架构实现短信发送服务

    前言 在现代互联网产品中，短信验证码是常见的用户验证方式。在传统架构中，我们通常需要租用短信网关、购买短信包，客户端需要集成短信接口 SDK，服务端需要编写短信发送逻辑，这些都会带来一定的成本和复杂度...

    1 年前
  • CSS Flexbox 实现自适应单行、多行、多列等布局

    在前端开发中，我们常常需要通过 CSS 布局来实现各种不同的页面效果。而 CSS 中的 Flexbox 布局方式，可以帮助开发者更方便地实现自适应单行、多行、多列等各种布局方式。

    1 年前
  • 端到端开发的 PWA，你值得拥有！

    随着移动互联网的飞速发展，用户对于 Web 应用的体验需求也越发迫切。PWA（Progressive Web App）由此应运而生，它是一种基于 Web 的应用，通过利用 Web 平台的特性和现代浏览...

    1 年前
  • Web Components 中如何实现无限滚动

    在 Web 开发中，无限滚动是一个非常常见的需求，比如需要实现一个像 Facebook 或 Twitter 那样的无限滚动列表。Web Components 是一种将面向对象的组件化思想应用到 Web...

    1 年前
  • 浅谈如何将 Express.js 应用部署到云服务器

    前言：随着云计算领域的飞速发展，云服务器已成为越来越多开发者的选择，其灵活可扩展的特性，为前端开发者提供了一种更方便更快捷的方式来部署和管理应用。本文将针对如何将 Express.js 应用部署到云服...

    1 年前
  • 如何通过 Webpack 自动构建可以使用的库

    前言 随着前端技术的发展和应用场景的变化，前端开发逐渐从单纯的页面编写拓展到组件化、模块化开发。这时，我们需要使用一些第三方库来协助我们完成开发任务，并且这些库往往需要通过 Webpack 自动构建才...

    1 年前
  • PM2 如何平滑升级应用程序版本

    什么是 PM2？ PM2 是一个流行的 Node.js 进程管理器，可以作为系统服务运行，管理 Node.js 应用程序的生命周期。PM2 具有自动重启、监控、日志记录和负载均衡等功能，使得 Node...

    1 年前
  • ESLint 如何纠正 Tabs VS Spaces 讨论

    作为前端开发者，Tabs 和 Spaces 之争是大家一直争论不休的话题。在工作中，我们必须遵守一定的代码规范，以便代码的可读性和可维护性。在代码规范中，Tabs 和 Spaces 的使用是一个很重要...

    1 年前
  • Material Design 在各平台上的调试和优化总结

    Material Design 是 Google 推出的一套设计规范，它被广泛应用于各种产品的前端设计中。在不同的平台上，如 Web、iOS 和 Android 等，Material Design 可...

    1 年前
  • 如何使用 Sequelize 实现多次查询操作

    Sequelize 是一个 Node.js 中的 ORM（Object-Relational Mapping）库，用于将 JavaScript 对象和关系型数据库的数据进行转换和映射。

    1 年前
  • 如何使用 Headless CMS 进行数据分析与优化

    在现今数字化社会，必须借助各种技术工具进行数据分析和优化，这使得提高网站性能并提供更好的用户体验变得更加重要和必要。其中 Headless CMS（无头内容管理系统）是一种被频繁使用的能够提高前端开发...

    1 年前
  • AngularJS SPA 应用如何实现弹出层组件

    在 Web 应用开发中，弹出层组件是一个很常用的 UI 元素。在 AngularJS SPA 应用中，如何实现弹出层组件呢？本文将介绍 AngularJS 中实现弹出层组件的方法，并提供实用的示例代码...

    1 年前
  • babel-preset-env 与 babel-cli 安装实践

    前言 在前端开发中，我们经常会使用到Babel，它是一个流行的JavaScript编译器，可以将新一代JS语法转换成ES5语法，这样可以使新的JS语法能够在现代浏览器中运行。

    1 年前
  • ES10 中的 Array.flat() 方法及其解析

    在过去的几年中，JavaScript 的发展日新月异。ES10 中的新功能如 Array.flat() 方法就是这样一个引人注目的例子。本文将深入介绍 Array.flat() 的定义、用法、示例以及...

    1 年前
  • 响应式设计中如何实现自适应字体

    在如今的web开发中，响应式设计已经成为了越来越必要的一个技能。响应式设计的目的是为了使网站在不同的设备上能够有更好的表现，而实现自适应字体则是响应式设计的重要组成部分。

    1 年前

相关推荐

    暂无文章