在前端开发中，经常会遇到需要同时发起多个异步请求的情况，例如获取用户信息、获取商品列表、获取订单信息等等。在没有 Promise 的时代，我们通常使用回调函数来处理这些异步请求，但是回调函数嵌套过多，代码可读性和可维护性都会变得非常差。而 Promise 的出现，可以很好地解决这个问题。
Promise 的基本用法
Promise 是一种异步编程的解决方案，它可以让我们更加优雅地处理异步请求。一个 Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。当 Promise 的状态变为 fulfilled 或 rejected 时，我们可以通过 then() 方法指定回调函数来处理 Promise 的返回值或错误信息。
下面是 Promise 的基本用法：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - -- ---- -- ------------ --------- -- -- ------------ -------- -- --- ------------------- -- - -- ------- -------------- -- - -- ------- ---
Promise.all() 方法
如果我们需要同时发起多个异步请求，并且需要等待所有请求都完成后再进行处理，可以使用 Promise.all() 方法。Promise.all() 方法接收一个 Promise 数组作为参数，返回一个新的 Promise，当所有 Promise 都成功返回结果时，这个新的 Promise 的状态变为 fulfilled，并返回所有 Promise 的结果数组；当其中一个 Promise 失败时，这个新的 Promise 的状态变为 rejected，并返回失败的 Promise 的错误信息。
下面是 Promise.all() 方法的基本用法：
-- -------------------- ---- -------
----- -------- - --- --------------- -- -
------------- -- -
-----------------
-- ------
---
----- -------- - --- --------------- -- -
------------- -- -
-----------------
-- ------
---
---------------------- ----------------------- -- -
--------------------- -- --------- --------
-------------- -- -
---------------------
---Promise.race() 方法
如果我们需要同时发起多个异步请求，并且只需要处理最先完成的请求的结果，可以使用 Promise.race() 方法。Promise.race() 方法接收一个 Promise 数组作为参数，返回一个新的 Promise，当其中一个 Promise 完成时，这个新的 Promise 的状态变为 fulfilled 或 rejected，并返回第一个完成的 Promise 的结果或错误信息。
下面是 Promise.race() 方法的基本用法：
-- -------------------- ---- -------
----- -------- - --- --------------- -- -
------------- -- -
-----------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------- ------------------
-- ------
---
----------------------- ---------------------- -- -
-------------------- -- -------
-------------- -- -
--------------------- -- ------ -------
---Promise 的优化实践
现在我们来看一个实际的例子，假设我们需要同时获取多个用户的信息，然后将这些信息进行处理。如果使用回调函数来处理这些异步请求，代码可能会长成这样：
-- -------------------- ---- -------
-------- ----------- --------- -
-- ------
------------- -- -
----- ---- - ---- ----- ----- --------
---------------
-- ------
-
-------- ------------- --------- -
----- ----- - ---
--- ----- - --
-------------- -- -
----------- ---- -- -
-----------------
--------
-- ------ --- ----------- -
----------------
-
---
---
-
------------ -- --- ----- -- -
------------------- -- ----- -- ----- ----- ---- ---- -- ----- ----- ---- ---- -- ----- ----- ----
---可以看到，这段代码中嵌套了两层回调函数，可读性和可维护性都非常差。如果使用 Promise 来处理这些异步请求，代码可以变得更加优雅：
-- -------------------- ---- -------
-------- ----------- -
------ --- --------------- -- -
-- ------
------------- -- -
----- ---- - ---- ----- ----- --------
--------------
-- ------
---
-
-------- ------------- -
----- -------- - ---------- -- -------------
------ ----------------------
-
------------ -- -------------- -- -
------------------- -- ----- -- ----- ----- ---- ---- -- ----- ----- ---- ---- -- ----- ----- ----
---可以看到，使用 Promise 可以让代码变得更加简洁和易读。同时，我们也可以使用 Promise.race() 方法来处理超时的情况：
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- ------- -- -
-- ------
------------- -- -
----- ---- - ---- ----- ----- --------
--------------
-- ------
---
-
-------- ------------- -
----- -------- - ---------- -- -------------
----- ------- - --- ----------------- ------- -- -
------------- -- -
---------- ------------------
-- ------
---
------ ------------------------------------ ----------
-
------------ -- -------------- -- -
------------------- -- ----- -- ----- ----- ---- ---- -- ----- ----- ---- ---- -- ----- ----- ----
-------------- -- -
--------------------- -- ------ -------
---结语
Promise 是一种非常强大的异步编程解决方案，它可以让我们更加优雅地处理异步请求。在实际开发中，我们可以使用 Promise.all() 方法和 Promise.race() 方法来优化多个异步请求的回调，让代码变得更加简洁和易读。同时，我们也可以使用 Promise 来处理超时的情况，让我们的应用变得更加健壮。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d3afdba941bf71347069a8