随着前端技术的快速发展，Promise 已成为 JavaScript 中广泛使用的一种异步解决方案。然而，Promise 在实践中仍然存在一些常见的 bug，本文将介绍这些 bug 的原因及解决方法，并提供代码示例。
1. then() 中返回了一个新的 Promise 对象
Promise 的 then() 方法是实现异步编程的重要途径。尤其是当对同一类操作进行了多次调用，then() 方法可以通过链式调用的方式简化代码。然而，有时候我们会忘记在 then() 函数中返回一个 Promise 对象，导致无法正确地继续链式调用。
例如：
-- -------------------- ---- -------
----- -- - -------------------
----- -- - ---------- -- -
------ --- ----------------- ------- -- -
-----------
---
--------------- -- -
-------------------
---在这个例子中，我们在第一个 then() 中返回了一个新的 Promise 对象，以便我们可以对其进行进一步操作。但在第二个 then() 中忘记了返回 Promise 对象，导致 p2 的值是 undefined，最终并未正确地打印出我们期望的值 2 。
解决方法
确保每个 then() 中返回 Promise 对象即可。如果不需要继续链式操作，可以使用 Promise.resolve() 方法在 then() 中返回一个包装的值。
修改后的代码如下：
-- -------------------- ---- -------
----- -- - -------------------
----- -- - ---------- -- -
------ --- ----------------- ------- -- -
-----------
---
--------------- -- -
-------------------
------ ----------------------- -- ------ ------- --
---2. 在 Promise 中使用了同步代码
Promise 的设计初衷是为了解决异步代码的问题。但是，在 Promise 中使用同步代码非常容易地导致问题的发生。例如：
const p = new Promise((resolve, reject) => {
const result = 1 + 1;
resolve(result);
});
p.then((value) => {
console.log(value);
});在这个例子中，我们直接在 Promise 的构造函数中使用了同步代码，这是错误的做法。因为我们假设这是一个异步操作，然而实际上它是同步执行的。这意味着在调用 p.then() 时，Promise 已经被解决，但是 then() 回调函数还没有被执行。
解决方法
如果需要在 Promise 中使用同步操作，可以使用 setTimeout() 方法将其异步化。修改后的代码如下：
-- -------------------- ---- -------
----- - - --- ----------------- ------- -- -
------------- -- -
----- ------ - - - --
----------------
---
---
-------------- -- -
-------------------
---3. 多个 then() 中使用了相同的回调函数
Promise 的 then() 方法可以链式调用，我们可以通过多次调用 then() 来对同一个值进行多次操作。然而，有时候我们会在多个 then() 中使用相同的回调函数，这会导致代码冗余。
例如：
-- -------------------- ---- -------
----- - - --- ----------------- ------- -- -
----- ------ - - - --
----------------
---
-------------- -- -
-------------------
---
-------------- -- -
-------------------
---在这个例子中，我们使用了两个 then() 来打印 Promise 的结果，这无疑是重复的。
解决方法
使用 Promise 的 catch() 和 finally() 可以避免使用多个 then()。可将 catch() 用于错误处理，finally() 用于收尾工作。例如：
-- -------------------- ---- -------
----- - - --- ----------------- ------- -- -
----- ------ - - - --
----------------
---
-------------- -- -
-------------------
---------------- -- -
-------------------
------------- -- -
-------------------- ------
---4. 使用 Promise.all() 时忽略了 rejected Promise
Promise.all() 方法可以用于同时执行多个 Promise，直到所有 Promise 都解决之后才会将结果返回。然而，当其中一个 Promise 被拒绝时，Promise.all() 并不会返回任何结果，这时我们需要手动处理。
例如：
-- -------------------- ---- -------
----- -- - -------------------
----- -- - ------------------ ----------------
----- -- - -------------------
---------------- --- ------------------ -- -
--------------------
---------------- -- -
---------------------------
---在这个例子中，我们同时执行了三个 Promise。其中 p2 被拒绝，因此 Promise.all() 无法正确地运行，我们需要在 catch() 中处理。
解决方法
在 Promise.all() 时添加 catch() 可以捕获 rejected Promise。例如：
-- -------------------- ---- -------
----- -- - -------------------
----- -- - ------------------ ----------------
----- -- - -------------------
---------------- ---------------- -- - ------ ------ --- ------------------ -- -
--------------------
---------------- -- -
---------------------------
---在这个例子中，我们在 Promise.all() 时添加 catch()，并返回 rejected Promise 对象。这样，即使某个 Promise 被拒绝，代码也能正确地运行。
结论
通过以上例子，我们可以看到 Promise 在实践中仍然存在一些常见的 bug。为避免这些问题，我们应该建立正确的 Promise 处理习惯。确保每个 then() 返回 Promise 对象，避免在 Promise 中使用同步代码，使用 catch() 和 finally() 来避免多个 then() 带来的代码冗余，使用带有 catch() 的 Promise.all() 来捕获 rejected Promise。这些技巧不仅可以帮助我们写出更加健壮的异步代码，还可以提高代码的可读性。
参考链接：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6755070e1b963fe9cc5197a0