Promise 是 ES6 中新增的一个异步处理方式，它可以让我们更加方便地处理异步代码。在前端开发中，我们常常需要处理多个异步请求的结果，而 Promise 提供了一种简洁的处理方式，使代码更加易于维护和扩展。
Promise 简介
Promise 是一个表示异步操作的对象，可以用来获取异步操作的结果或者错误，或者做进一步的处理。Promise 包含三种状态：pending（进行中）、fulfilled（已完成）和 rejected（已失败）。一旦 Promise 的状态从 pending 变为 fulfilled 或 rejected，就不会再变化。
处理多个请求的结果
在前端开发中，处理多个异步请求的结果非常常见。例如，在一个页面中，需要从服务器获取多个数据源的数据，然后将这些数据展示在页面上。传统的处理方式通常是使用回调函数进行处理，但是这种方式不仅代码复杂度高，而且容易出现回调地狱问题。而 Promise 提供了一种更加简洁的处理方式，使得代码更加易于理解和维护。
Promise.all
Promise.all 是 Promise 的一个静态方法，它接收一个 Promise 数组作为参数，并返回一个新的 Promise。当所有 Promise 都成功完成时，返回的 Promise 将以一个数组的形式传递结果，顺序与传入的 Promise 数组顺序相同。如果有任何一个 Promise 被 rejected，则返回的 Promise 将立即被 rejected。
下面是一个使用 Promise.all 处理多个请求的例子：
-- -------------------- ---- ------- ------------- ----------------------------------- ---------------------------------- ----------------- -- - -- ------------------- ---------- ----- ------- ------ - ---------- -- ------- -------------- -- - -- --------------------- ---
在上面的代码中，我们使用 Promise.all 来处理两个异步请求，它们分别向服务端请求 data1 和 data2。当所有请求完成时，Promise.all 返回一个 Promise，它传递一个数组，包括两个请求的结果。
Promise.race
Promise.race 与 Promise.all 类似，也是接收一个 Promise 数组作为参数并返回一个新的 Promise。但与 Promise.all 不同的是，Promise.race 只要有一个 Promise 状态变为 fulfilled 或 rejected 就会立刻返回，不会等到所有 Promise 都完成。返回的 Promise 会传递第一个状态变化的 Promise 的结果。
下面是一个使用 Promise.race 处理多个请求的例子：
-- -------------------- ---- ------- -------------- ----------------------------------- ---------------------------------- ---------------- -- - -- ----------------- ------- -- --------------------- ---- -- -------------- -- - -- --------------------- ---
在上面的代码中，我们使用 Promise.race 来处理两个异步请求，与 Promise.all 不同的是，在第一个请求完成后，返回的 Promise 就会立即传递第一个请求的结果，而不等待第二个请求完成。
总结
使用 Promise 处理多个请求的结果，可以使代码更加易于理解和维护。Promise 提供了 Promise.all 和 Promise.race 两种处理方式，可以分别用来处理多个请求的结果的情况。同时，Promise 也是一个非常重要的基础知识，掌握它可以使我们更加自如地处理异步代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c2e22183d39b48816d54ec