在前端开发中，Promise 是一个非常重要的概念。它是 JavaScript 异步编程的一种解决方案，可以有效地解决回调地狱的问题。在面试中，手写 Promise 已经成为了必备技能。本文将详细介绍如何手写一个完整版的 Promise，包括 Promise 的基本用法、Promise 的实现原理以及如何手写 Promise。
Promise 的基本用法
Promise 是一个对象，用来表示一个异步操作的最终完成（或失败）及其结果值。它有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。Promise 对象的状态改变只能从 pending 转变为 fulfilled 或 rejected。
Promise 对象有两个重要的方法：then 和 catch。then 方法用于处理 Promise 对象的成功状态，catch 方法用于处理 Promise 对象的失败状态。
下面是 Promise 的基本用法：
-- -------------------- ---- -------
----- - - --- ----------------- ------- -- -
-- ----
------------- -- -
-------------------
-- ----------------
-- ------
---
--------------- -- -
--------------------
---------------- -- -
-------------------
---上面的代码中，Promise 构造函数接受一个函数作为参数，这个函数有两个参数：resolve 和 reject。resolve 函数用于将 Promise 对象的状态从 pending 转变为 fulfilled，reject 函数用于将 Promise 对象的状态从 pending 转变为 rejected。
在上面的代码中，我们使用 setTimeout 模拟一个异步操作，1 秒后将 Promise 对象的状态从 pending 转变为 fulfilled。然后我们使用 then 方法处理 Promise 对象的成功状态，使用 catch 方法处理 Promise 对象的失败状态。
Promise 的实现原理
Promise 的实现原理非常简单，它本质上是一个状态机。Promise 对象有三种状态：pending、fulfilled 和 rejected。当创建一个 Promise 对象时，它的状态是 pending。当异步操作完成后，Promise 对象的状态将从 pending 转变为 fulfilled 或 rejected。我们可以使用 resolve 函数将 Promise 对象的状态从 pending 转变为 fulfilled，使用 reject 函数将 Promise 对象的状态从 pending 转变为 rejected。
在实现 Promise 的时候，我们需要考虑以下几个问题：
- 如何实现异步操作？
- 如何处理 then 方法和 catch 方法？
- 如何处理链式调用？
下面是一个简单的 Promise 实现：
-- -------------------- ---- -------
----- ------- -
--------------- -
---------- - ----------
----------- - -----
----------- - -----
------------------------- - ---
------------------------ - ---
----- ------- - -------- -- -
-- ----------- --- ---------- -
---------- - ------------
----------- - -------
-------------------------------------------- -- -
----------------------
---
-
--
----- ------ - -------- -- -
-- ----------- --- ---------- -
---------- - -----------
----------- - -------
------------------------------------------- -- -
----------------------
---
-
--
--- -
----------- --------
- ----- ------- -
--------------
-
-
----------------- ----------- -
----------- - ------ ----------- --- ---------- - ----------- - -------- -- -------
---------- - ------ ---------- --- ---------- - ---------- - -------- -- - ----- ------- --
----- ------- - --- ----------------- ------- -- -
-- ----------- --- ------------ -
------------- -- -
--- -
----- ------ - -------------------------
----------------
- ----- ------- -
--------------
-
-- ---
-
-- ----------- --- ----------- -
------------- -- -
--- -
----- ------ - ------------------------
----------------
- ----- ------- -
--------------
-
-- ---
-
-- ----------- --- ---------- -
--------------------------------- -- -
------------- -- -
--- -
----- ------ - -------------------------
----------------
- ----- ------- -
--------------
-
-- ---
---
-------------------------------- -- -
------------- -- -
--- -
----- ------ - ------------------------
----------------
- ----- ------- -
--------------
-
-- ---
---
-
---
------ --------
-
----------------- -
------ --------------- ------------
-
-上面的代码中，我们使用类来实现 Promise。Promise 对象有五个属性：state、result、reason、onFulfilledCallbacks 和 onRejectedCallbacks。state 表示 Promise 对象的状态，result 表示 Promise 对象的结果值，reason 表示 Promise 对象的失败原因。onFulfilledCallbacks 和 onRejectedCallbacks 分别表示处理 Promise 对象成功状态和失败状态的回调函数。
在 Promise 的构造函数中，我们接受一个函数作为参数。这个函数有两个参数：resolve 和 reject。当异步操作完成后，我们调用 resolve 函数或 reject 函数来改变 Promise 对象的状态。
在 then 方法中，我们使用 setTimeout 函数模拟异步操作。当 Promise 对象的状态为 fulfilled 时，我们调用 onFulfilled 函数处理成功状态，当 Promise 对象的状态为 rejected 时，我们调用 onRejected 函数处理失败状态。当 Promise 对象的状态为 pending 时，我们将 onFulfilled 函数和 onRejected 函数分别加入 onFulfilledCallbacks 数组和 onRejectedCallbacks 数组中，以便在异步操作完成后处理 Promise 对象的状态。
在 catch 方法中，我们调用 then 方法，将 onRejected 函数作为参数传入。
如何手写 Promise
手写 Promise 可以帮助我们更好地理解 Promise 的实现原理。下面是一个手写 Promise 的实现：
-- -------------------- ---- -------
-------- ------------- -
---------- - ----------
----------- - -----
----------- - -----
------------------------- - ---
------------------------ - ---
----- ------- - -------- -- -
-- ----------- --- ---------- -
---------- - ------------
----------- - -------
-------------------------------------------- -- -
----------------------
---
-
--
----- ------ - -------- -- -
-- ----------- --- ---------- -
---------- - -----------
----------- - -------
------------------------------------------- -- -
----------------------
---
-
--
--- -
----------- --------
- ----- ------- -
--------------
-
-
------------------------ - -------- ------------- ----------- -
----------- - ------ ----------- --- ---------- - ----------- - -------- -- -------
---------- - ------ ---------- --- ---------- - ---------- - -------- -- - ----- ------- --
----- ------- - --- ------------------- ------- -- -
-- ----------- --- ------------ -
------------- -- -
--- -
----- ------ - -------------------------
----------------
- ----- ------- -
--------------
-
-- ---
-
-- ----------- --- ----------- -
------------- -- -
--- -
----- ------ - ------------------------
----------------
- ----- ------- -
--------------
-
-- ---
-
-- ----------- --- ---------- -
--------------------------------- -- -
------------- -- -
--- -
----- ------ - -------------------------
----------------
- ----- ------- -
--------------
-
-- ---
---
-------------------------------- -- -
------------- -- -
--- -
----- ------ - ------------------------
----------------
- ----- ------- -
--------------
-
-- ---
---
-
---
------ --------
--
------------------------- - -------- ------------ -
------ --------------- ------------
--上面的代码中，我们使用构造函数和原型链来实现 Promise。Promise 对象有五个属性：state、result、reason、onFulfilledCallbacks 和 onRejectedCallbacks。state 表示 Promise 对象的状态，result 表示 Promise 对象的结果值，reason 表示 Promise 对象的失败原因。onFulfilledCallbacks 和 onRejectedCallbacks 分别表示处理 Promise 对象成功状态和失败状态的回调函数。
在 Promise 的构造函数中，我们接受一个函数作为参数。这个函数有两个参数：resolve 和 reject。当异步操作完成后，我们调用 resolve 函数或 reject 函数来改变 Promise 对象的状态。
在 then 方法中，我们使用 setTimeout 函数模拟异步操作。当 Promise 对象的状态为 fulfilled 时，我们调用 onFulfilled 函数处理成功状态，当 Promise 对象的状态为 rejected 时，我们调用 onRejected 函数处理失败状态。当 Promise 对象的状态为 pending 时，我们将 onFulfilled 函数和 onRejected 函数分别加入 onFulfilledCallbacks 数组和 onRejectedCallbacks 数组中，以便在异步操作完成后处理 Promise 对象的状态。
在 catch 方法中，我们调用 then 方法，将 onRejected 函数作为参数传入。
总结
本文介绍了 Promise 的基本用法、Promise 的实现原理以及如何手写一个完整版的 Promise。手写 Promise 可以帮助我们更好地理解 Promise 的实现原理，提高我们的编程能力。在面试中，掌握手写 Promise 的技能可以让我们更加自信地应对面试挑战。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6513cac795b1f8cacdc3a71a