在前端开发中，经常会遇到需要同时发起多个异步请求的情况，例如获取用户信息、获取商品列表、获取订单信息等等。在没有 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 来处理超时的情况，让我们的应用变得更加健壮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3afdba941bf71347069a8
