介绍
JavaScript 中有很多异步编程的解决方案，但是都存在一些缺陷，ES6 中引入了 Promise，优化了异步编程的方式，解决了回调地狱的问题，但是使用 Promise 也存在一些常见的错误原因，需要我们在使用时注意。
本文将介绍 ES6 中 Promise 的封装方法，以及常见错误原因解析，希望能对前端开发者有一定的帮助。
Promise 的封装方法
封装方式一
-- -------------------- ---- -------
-------- ------------- -
--- ----- - -----
---------- - -----
---------- - -----
---------------- - -----
--------------- - -----
-------- -------------- -
------------- -- -
-- ------------------- -
----------- - ------
-------------------------------
-
---
-
-------- ------------- -
------------- -- -
-- ------------------ -
----------- - ------
------------------------------
-
---
-
----------- --------
-
------------------------ - -------- ------------- ----------- -
---------------- - ------------
--------------- - -----------
--封装方式二
-- -------------------- ---- -------
-------- ------------- -
--- ---- - -----
---------- - -----
---------- - -----
-------------- - -------- ------- -
---------- - ------
-------------------- -- ---------------------------------
--
------------- - -------- ------- -
---------- - ------
------------------- -- --------------------------------
--
------------------ ---------------
-
------------------------ - -------- ----------------- --------------- -
-------------------- - ----------------
------------------- - ---------------
--封装方式三
-- -------------------- ---- -------
----- --------- -
--------------------- -
----- ------- - ------ -- -
----------- - ------------
--------- - -----
----- ----------------------------- -
----------------------------------------
-
--
----- ------ - ------- -- -
----------- - -----------
---------- - ------
----- ---------------------------- -
-----------------------------------
-
--
----------- - ----------
--------- - ---
---------- - ---
-------------------- - ---
------------------- - ---
----------------- --------
-
----------------- ----------- -
-- ------------ --- ------------ -
-----------------------
- ---- -- ------------ --- ----------- -
-----------------------
- ---- -
---------------------------------------
-------------------------------------
-
-
-常见错误原因解析
1. 未捕获的错误
Promise 中未捕获的错误会导致程序崩溃，但是我们可以使用 catch 方法捕获错误，避免程序崩溃。
Promise.resolve()
.then(() => {
throw Error("Error！");
})
.catch((error) => {
console.log(error.message);
});2. 链式调用时忘记返回 Promise
链式调用时每个 then 方法都会返回一个 Promise，如果我们忘记返回 Promise，就会导致后面的 then 方法无法执行，需要注意。
-- -------------------- ---- -------
-----------------
-------- -- -
-----------------------
--
-------- -- -
------------------------
---
----------------
--------- -- -
----------------------
--
--------- -- -
-----------------------
---3. 多个 Promise 竞速时需要返回最先完成的 Promise
Promise.all 和 Promise.race 可以等待多个 Promise 完成，其中 Promise.all 返回所有 Promise 都完成后的结果，Promise.race 返回最先完成的 Promise 的结果。
Promise.all([Promise.resolve("1"), Promise.resolve("2")]).then((value) => {
console.log(value);
});
// ["1", "2"]
Promise.race([Promise.resolve("1"), Promise.resolve("2")]).then((value) => {
console.log(value);
});
// "1"结语
Promise 是一种优秀的异步编程解决方案，通过自定义 Promise 的封装方式，我们可以更加灵活的使用 Promise，处理各种异步情况。另外，我们需要注意常见的错误原因，从而避免在开发中引入错误。
希望本文对使用 Promise 的前端开发者有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/678170d3935627c900bcf944