在前端开发中，我们经常会遇到需要进行多个异步请求的情况。但是，异步请求的加载顺序往往是不可控的，这就会导致页面展示出现问题，影响用户体验。那么，如何控制多个异步请求的异步加载顺序呢？这时候，Promise 就派上用场了。
Promise 简介
Promise 是 ES6 中新增的一种处理异步操作的方式，它可以避免回调地狱的问题，使代码更加优雅、易读。Promise 可以看作是一个容器，里面保存着未来才会结束的事件（通常是一个异步操作），并提供了一些方法来操作这个容器。
Promise 有三种状态：
- Pending（进行中）：初始状态，既不是成功，也不是失败状态。
- Fulfilled（已成功）：意味着操作成功完成。
- Rejected（已失败）：意味着操作失败。
Promise 的基本用法
Promise 的基本用法如下：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-- ----
-- --- ------ --- -
--------------
- ---- -
--------------
-
---
------------------- -- -
-- ----
---------------- -- -
-- ----
---其中，Promise 构造函数接收一个函数作为参数，这个函数的两个参数 resolve 和 reject 分别表示异步操作成功和失败时所执行的函数。promise.then() 方法用来处理异步操作成功后的结果，promise.catch() 方法用来处理异步操作失败后的结果。
Promise 控制多个异步请求的异步加载顺序
在实际开发中，我们经常需要进行多个异步请求，并且需要保证它们的加载顺序。这时候，我们可以使用 Promise 的链式调用来实现。
假设我们有三个异步请求，它们的加载顺序为 A -> B -> C。那么，我们可以这样来控制它们的异步加载顺序：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
-- ---- -
-- --- ---- - -- --- -
---------------
- ---- -
---------------
-
---
----- -------- - --------------------- -- -
------ --- ----------------- ------- -- -
-- ---- -
-- --- ---- - -- --- -
---------------
- ---- -
---------------
-
---
---
----- -------- - --------------------- -- -
------ --- ----------------- ------- -- -
-- ---- -
-- --- ---- - -- --- -
---------------
- ---- -
---------------
-
---
---
--------------------- -- -
-- -----------
---------------- -- -
-- ----
---在上面的代码中，我们首先定义了三个 Promise 对象，分别表示异步操作 A、B、C。然后，我们使用 promiseA.then() 方法来执行异步操作 B，并返回一个新的 Promise 对象 promiseB。接着，我们使用 promiseB.then() 方法来执行异步操作 C，并返回一个新的 Promise 对象 promiseC。
最后，我们使用 promiseC.then() 方法来处理所有异步操作成功完成的情况，使用 promiseC.catch() 方法来处理异步操作失败的情况。
通过这种方式，我们可以控制多个异步请求的异步加载顺序，使页面展示更加合理、优雅。
示例代码
下面是一个使用 Promise 控制多个异步请求的示例代码：
-- -------------------- ---- -------
-------- ---------- -
----- -------- - --- ----------------- ------- -- -
------------- -- -
-------------
-- ------
---
----- -------- - --------------------- -- -
------ --- ----------------- ------- -- -
------------- -- -
----------------- ----
-- ------
---
---
----- -------- - --------------------- -- -
------ --- ----------------- ------- -- -
------------- -- -
----------------- ----
-- -----
---
---
--------------------- -- -
------------------- -- -- -- - --
---------------- -- -
-------------------
---
-
-----------在这个示例代码中，我们定义了三个异步请求，它们的加载顺序为 A -> B -> C。其中，每个异步请求都使用了 setTimeout() 函数来模拟异步操作。
最后，我们使用 promiseC.then() 方法来处理所有异步操作成功完成的情况，并输出最终的结果。
总结
通过本文的介绍，我们了解了 Promise 的基本用法和如何使用 Promise 控制多个异步请求的异步加载顺序。Promise 可以帮助我们避免回调地狱的问题，使代码更加优雅、易读。在实际开发中，我们需要灵活运用 Promise，使页面展示更加合理、优雅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/661163b4d10417a2221fedfd