Promise 是 JavaScript 中处理异步操作的一种方式，它可以使异步代码更加清晰、简洁和易于理解。在 Promise 中，all 和 race 是两个非常重要的方法，它们可以帮助我们更好地管理异步任务的执行。
all 方法
Promise.all 方法接收一个包含多个 Promise 对象的数组，并返回一个新的 Promise 对象。当所有的 Promise 对象都完成时，新的 Promise 对象才会被执行。如果其中任意一个 Promise 对象被拒绝或抛出异常，新的 Promise 对象将立即被拒绝或抛出异常。
下面是一个使用 all 方法的简单示例：
const promise1 = Promise.resolve(1);
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'hello'));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'world'));
Promise.all([promise1, promise2, promise3]).then(results => {
console.log(results); // [1, 'hello', 'world']
});在上面的示例中，我们创建了三个 Promise 对象，其中两个是通过异步的方式生成的。然后我们使用 all 方法来等待它们完成，当所有的 Promise 对象都完成时，我们获得了它们的结果并输出到控制台。
使用 all 方法可以方便地管理多个 Promise 对象的执行顺序和结果，尤其在需要并行执行多个异步任务的情况下，all 方法可以帮助我们提高代码的性能和可读性。
race 方法
Promise.race 方法同样接收一个包含多个 Promise 对象的数组，并返回一个新的 Promise 对象。但是，race 方法的行为略有不同：它只要求其中任意一个 Promise 对象完成即可，新的 Promise 对象就会被执行。
下面是一个使用 race 方法的示例：
const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'hello'));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 200, 'world'));
Promise.race([promise1, promise2]).then(result => {
console.log(result);
}).catch(error => {
console.log(error); // 'hello'
});在上面的示例中，我们创建了两个 Promise 对象，其中一个使用 setTimeout 延迟了 200 毫秒才执行 resolve 方法。我们使用 race 方法来等待它们的结果，当第一个 Promise 对象完成时，我们的新的 Promise 对象就会被执行，并输出它的结果或抛出它的异常。
使用 race 方法可以帮助我们在多个异步操作中选择一个最快的结果，并尽快继续进行我们的代码逻辑。
总结
在前端开发中，我们经常需要处理大量的异步操作，Promise 的出现可以帮助我们更好地管理异步代码，使其更加清晰、简洁和易于理解。在 Promise 中，all 和 race 方法是两个非常重要的方法，它们可以帮助我们更好地管理异步任务的执行。
在使用 all 和 race 时，需要注意它们的行为差异，合理选择不同的方法以满足我们的需求。同时，需要注意 Promise 对象中可能出现的错误和异常，及时捕获并处理它们，以保证代码的可靠性和稳定性。
下面是一个综合示例代码，展示如何使用 Promise 和 all 方法来获取多个 API 的数据，并将它们合并到一个数组中：
-- -------------------- ---- ------- ----- ---- - - ------------------------------------ ------------------------------------ ---------------------------------- -- ----- -------- - ------------ -- ------------------------ -- ------------------ ---------------------------------- -- - --------------------- -- ------- ------ ------ -------------- -- - --------------------- ---
在上面的示例代码中，我们首先定义了一个包含多个 URL 的数组，然后使用 map 方法将每个 URL 转化为一个 Promise 对象，并返回一个新的 Promise 数组。最后，我们使用 all 方法来等待所有 Promise 对象的完成，并将它们的结果放入一个新的数组中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450b5e7980a9b385b9a77b5