Promise 是一种异步实现模式，它旨在解决 JavaScript 中异步编程的问题。在异步操作完成后，Promise 可以返回一个结果或一个错误，以便我们可以更好地处理异步操作的结果。
在本文中，我将介绍如何手写一个 Promise。这是一个实用项目，它将帮助你更好地了解并发现 Promise 的潜力，以及如何在实际项目中使用它。
Promise 的基础知识
首先，让我们看一下 Promise 的核心三个状态。
- Pending：初始状态，既不是成功也不是失败。
- Fulfilled（已完成）：意味着操作成功完成，Promise 返回了相应的结果。
- Rejected（已拒绝）：意味着操作失败，Promise 返回了一个错误。
Promise 的状态可以随时改变。在某个时间点，一个 Promise 可能处于 Pending 状态，但在几秒钟后，它可能会变成 Fulfilled 状态，并返回一个成功的结果。
手写 Promise
接下来，我们将手写一个 Promise，具体步骤如下。
1. 构造函数
第一步是创建一个 Promise 构造函数。Promise 构造函数应该接收一个函数作为参数，该函数将接收两个参数：resolve 和 reject。
function MyPromise(fn) {
// fn 是一个函数参数
// 其中 fn 接收两个函数参数：resolve 和 reject
}2. Promise 的状态和结果
现在，我们需要在 Promise 构造函数中定义 Promise 状态和结果。我们可以使用变量保存 Promise 的状态，并在 Promise 状态变化时更新状态。
-- -------------------- ---- -------
-------- ------------- -
--- ----- - ----------
--- ------ - -----
-------- ------------- -
----- - ------------
------ - -----
-
-------- ------------- -
----- - -----------
------ - ------
-
----------- --------
-3. Promise 的 then 方法
接下来，我们需要编写一个 then 方法，以便在 Promise 完成操作后执行代码。then 方法应该接收两个函数参数：一个在 Promise 成功时执行，另一个在 Promise 失败时执行。
-- -------------------- ---- -------
-------- ------------- -
--- ----- - ----------
--- ------ - -----
--- --------------- - -----
--- ------------- - -----
-------- ------------- -
----- - ------------
------ - -----
-- ----------------- -
------------------------
-
-
-------- ------------- -
----- - -----------
------ - ------
-- --------------- -
----------------------
-
-
-------- --------------- -------- -
--------------- - ----------
------------- - --------
-
----------- --------
-现在，我们已经编写了一个简单的 Promise。在下面的示例中，我们将演示如何在项目中使用 MyPromise：
-- -------------------- ---- -------
----- --------- - --- ------------------- ------- -- -
-- ----
-- ---------
-- ---- -
----------------
- ---- -
---------------
-
---
----------------------- -- -
-------------------- -- ----
-- ------- -- -
------------------- -- ----
---在项目中应用 Promise
现在，我们已经了解了 Promise 的构造、API，并可以实现自己的 Promise。
在现代 Web 开发中，Promise 已成为处理异步操作的一种常见模式。我们可以在 HTTP 请求、表单提交、图像和其他资源加载以及大多数其他异步操作中使用 Promise。
下面是一个使用 Promise 处理 HTTP 请求的示例：
-- -------------------- ---- -------
-------- ------------ -
------ --- ----------------- ------- -- -
-- -- --- ----
----- --- - --- -----------------
-- ------
---------------------- - -- -- -
-- --------------- --- -- -
-- ----------- --- ---- -
--------------------------
- ---- -
-----------------------
-
-
--
-- ------
--------------- ---- ------
-- ----
-----------
---
-
-- -- ------- -- ---- --
-------------------------------------------------------
-------------- -- -
-------------------- -- ---- ---
-- ------- -- -
------------------- -- ----
---这只是 Promise 的一种用例。在 JavaScript 项目中，我们可以使用 Promise 处理任何异步操作。
总结
通过手写 Promise，并在项目中实际应用，我们更深入地理解了 Promise 模式及其适用场景。同时，也更好地学习了如何使用 Promise API 合理地控制异步流，并使代码更具可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654f20767d4982a6eb822a1a