前言
在我们写前端代码过程中经常会用到 Promise 相关的 API，但是可能在一些场景下使用 Promise 时会出现一些错误。那么这些错误都有哪些原因？如何解决呢？本篇文章将会对 Promise 错误的产生原因及解决方式进行剖析。
Promise 相关的错误
错误 1：未捕获的 Promise 异常
未捕获的 Promise 异常指的是 Promise 对象在执行过程中发生了错误，但是在代码中并没有对错误进行处理，导致错误未被捕获导致程序崩溃。
例如以下代码片段：
--- ----------------- ------- -- - -- -- ----- --- ------------ --
这段代码中 Promise 对象在执行时会抛出一个错误，由于没有进行错误处理，因此错误会直接跑到代码执行的最外层导致程序崩溃。这种情况下我们需要使用 catch 来捕获异常并进行处理：
--- ----------------- ------- -- - -- -- ----- --- ------------ -------------- -- - ------------------ --
错误 2：Promise 执行顺序出错
Promise 的执行顺序是非常重要的。如果 Promise 的执行顺序出错，可能会导致程序的逻辑混乱。
例如以下代码片段：
--- ----------------- ------- -- -
------------- -- -
----------------------
---------
-- -----
--
------------- -- -
-------------------------
-- ----这段代码中开启了两个定时器，第一个定时器需要等待 1 秒后输出 'Promise' 并通过 resolve 结束 Promise，而第二个定时器只需要等待 0.5 秒就输出 'setTimeout'。
由于 Promise 的执行顺序问题，可能出现如下输出结果：
---------- -------
这是因为第二个定时器的执行顺序优先于 Promise 对象，我们需要将两者顺序调换，将 Promise 对象放在前面：
------------- -- -
-------------------------
-- ----
--- ----------------- ------- -- -
------------- -- -
----------------------
---------
-- -----
--错误 3：Promise 链式调用错误
在 Promise 链式调用时出现错误通常是由于没有正确返回 Promise 对象导致的。例如以下代码片段：
--- ----------------- ------- -- -
------------- -- -
----------------------
---------
-- -----
---------- -- -
--------------------
---------- -- -
--------------------
--由于第一个 then 没有正确返回 Promise 对象，导致第二个 then 没有在第一个 then 完成后执行。我们需要在每个 then 中都返回 Promise 防止这种情况的发生：
--- ----------------- ------- -- -
------------- -- -
----------------------
---------
-- -----
---------- -- -
--------------------
------ -----------------
---------- -- -
--------------------
--结论
在使用 Promise 相关 API 时，需要注意以下几个方面：
- Promise 执行过程中出现异常需要使用
catch进行正确处理； - Promise 的执行顺序需要注意；
- Promise 链式调用时需要在每一个
then中返回 Promise 对象。
参考文献
示例代码
以下是示例代码，供读者参考：
-- -- ------ ------- --
--- ----------------- ------- -- -
-- --
----- --- ------------
-------------- -- -
------------------
--
-- -- --------- ------
------------- -- -
-------------------------
-- ----
--- ----------------- ------- -- -
------------- -- -
----------------------
---------
-- -----
--
-- -- --------- ------
--- ----------------- ------- -- -
------------- -- -
----------------------
---------
-- -----
---------- -- -
--------------------
------ -----------------
---------- -- -
--------------------
--来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671b09389babaf620fa70717