Promise 是一种在 JavaScript 中处理异步操作的技术，它以链式调用的方式改进了回调函数。然而，由于 Promise 的执行过程有时候会让人头疼，因此本文将详细解释 Promise 的执行顺序、工作原理以及优化技巧。
Promise 的执行顺序
Promise 的执行顺序可以是下面三种情况之一：
1. 立即执行
当使用 Promise.resolve(value) 或者 Promise.reject(reason) 创建一个新的 Promise 对象时，它会立即执行并返回一个结果。
const p1 = Promise.resolve('foo');
console.log('p1:', p1); // p1: Promise { 'foo' }
const p2 = Promise.reject('bar');
console.log('p2:', p2); // p2: Promise { <rejected> 'bar' }2. 顺序执行
当前一个 Promise 对象解决（resolve）之后，才会执行下一个 then() 方法中的代码。
-- -------------------- ---- ------- ----- - - --- ----------------- ------- -- - ------------------------ ------- --------------- --- ------------ -- - --------------------- ---- ------ ------ ------------- -- - --------------------- ---- ------ ------ ---
上述代码的输出结果为：
synchronous code p.then() 1 p.then() 2
3. 嵌套执行
当在 then() 方法的回调函数中返回一个新的 Promise 对象时，这个 Promise 对象与前一个 Promise 对象构成嵌套关系，新的 Promise 객체需要等待前一个 Promise 解决后再执行。
-- -------------------- ---- -------
----- -- - --- ----------------- ------- -- -
--------------- - ----------- -------
---------------
---
------------- -- -
---------------------- ----
------ --- ----------------- ------- -- -
--------------- - ----------- -------
---------------
---
------------- -- -
---------------------- --- -------
------ ------
--上述代码的输出结果为：
p1 - synchronous code p1.then() 1 p2 - synchronous code p1.then() 2 bar
Promise 的工作原理
当 Promise 对象被创建时，它会有以下三个状态之一：
- Pending（等待状态）：初始化 Promise 对象时的状态。
- Fulfilled（解决状态）：Promise 执行成功。
- Rejected（拒绝状态）：Promise 执行失败。
Promise 对象的状态只能从 Pending 变成 Fulfilled 或者 Rejected。一旦对象状态变化后，就不会再改变。
Promise 对象是通过 resolve() 和 reject() 方法来切换状态的。resolve() 方法将 Promise 对象的状态变为 Fulfilled，而 reject() 方法则将 Promise 对象的状态变为 Rejected。
Promise 对象会持有一个结果值，可以通过 then() 方法来访问它。当调用 then() 方法时，它会返回一个新的 Promise 对象，用于对结果值进行后续操作。
Promise 的优化技巧
Promise 对象的执行顺序、工作原理逐渐清晰，接下来介绍一些优化技巧。
使用 Promise.all() 方法
当需要同时执行多个 Promise 对象时，可以使用 Promise.all() 方法。Promise.all() 方法将等待所有的 Promise 对象解决后，才会将结果值传递给新的 Promise 对象。
-- -------------------- ---- -------
----- -- - -----------------------
----- -- - -----------------------
----- -- - --- ----------------- ------- -- -
------------- -- -
---------------
-- ------
---
---------------- --- ---------------- -- -
-------------------- -- ------- ------ ------
---使用 Promise.race() 方法
当需要只获取最先解决的 Promise 对象的结果时，可以使用 Promise.race() 方法。
-- -------------------- ---- -------
----- -- - -----------------------
----- -- - --- ----------------- ------- -- -
------------- -- -
---------------
-- -----
---
----------------- --------------- -- -
------------------- -- -----
---将 Promise 对象转换为 async/await 函数
当 Promise 对象过多或嵌套太深时，可以将 Promise 对象转换为 async/await 函数。async/await 使异步代码更加易读，避免了回调地狱的情况。
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- ------ - ----- -----------------------
----- ------ - ----- -----------------------
----- ------ - ----- --- ----------------- ------- -- -
------------- -- -
---------------
-- -----
---
------------------- ------- -------- -- ------ ------ -----
- ----- ------- -
-------------------
-
-
----------结论
了解 Promise 对象的执行顺序、工作原理以及优化技巧，对于编写高质量的异步代码是十分必要的。采用合适的技巧可以使代码更加清晰、易读，并且降低在开发过程中可能会遇到的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f5fe05c5c563ced57e5d19