在前端开发中，异步操作是非常常见的，而 Promise 是一种很优秀的异步编程解决方案。在 Promise 的操作中，我们经常会用到 race 和 all 方法。但是，这两个方法的使用方法和特点不同，如果使用不当，会导致程序出现问题。本文将介绍如何正确地使用 Promise 的 race 和 all 方法。
race 方法
race 是 Promise 对象提供的一个静态方法，它可以接受一个由 Promise 对象组成的数组作为参数，并返回一个新的 Promise 对象，该对象将完成状态变为数组中最先完成的 Promise 的状态。例如：
const p1 = new Promise(resolve => {
setTimeout(resolve, 500, 'p1');
});
const p2 = new Promise(resolve => {
setTimeout(resolve, 1000, 'p2');
});
Promise.race([p1, p2]).then(console.log); // 输出 p1上述代码中，我们创建了两个 Promise 对象 p1 和 p2，p1 在 500 毫秒后完成，p2 在 1000 毫秒后完成。然后，我们使用 Promise.race 方法将两个 Promise 对象组成的数组传入，得到一个新的 Promise 对象。由于 p1 先于 p2 完成，因此输出 p1。
在实际应用中，Promise.race 方法可以用于设置请求超时的功能。例如，我们可以设置一个网络请求的 Promise 对象和一个超时的 Promise 对象，将它们组成的数组传入 Promise.race 方法中，如果网络请求完成，就执行相应的回调函数；如果超时，就执行相应的错误处理函数。
all 方法
all 是 Promise 对象提供的另一个静态方法，它可以接受一个由 Promise 对象组成的数组作为参数，并返回一个新的 Promise 对象，该对象在数组中所有 Promise 对象都完成后，才将完成状态变为 resolved，返回值是一个由所有 Promise 对象的结果组成的数组。
const p1 = Promise.resolve('p1');
const p2 = Promise.resolve('p2');
Promise.all([p1, p2]).then(console.log); // 输出 ['p1', 'p2']上述代码中，我们创建了两个 Promise 对象 p1 和 p2，并使用 Promise.all 方法将它们组成的数组传入。由于两个 Promise 对象都是立即完成，并返回了相应的结果，因此执行回调函数，输出 ['p1', 'p2']。
需要注意的是，如果数组中有一个 Promise 对象的状态变为 rejected，那么 Promise.all 方法返回的 Promise 对象就会立即变为 rejected，并且后续的 Promise 对象不会被执行。例如：
const p1 = Promise.resolve('p1');
const p2 = new Promise((resolve, reject) => {
setTimeout(() => reject('p2'), 1000);
});
Promise.all([p1, p2]).then(console.log).catch(console.log); // 输出 p2上述代码中，我们创建了两个 Promise 对象 p1 和 p2，其中 p2 在 1000 毫秒后变为 rejected。然后，我们使用 Promise.all 方法将它们组成的数组传入，由于 p2 的状态变为 rejected，因此 Promise.all 方法返回的 Promise 对象也变为 rejected，并执行相应的错误处理函数，输出 p2。
在实际应用中，Promise.all 方法可以用于并行执行多个任务，并在所有任务完成后进行一些处理操作。例如，我们可以将多个网络请求的 Promise 对象组成一个数组，传入 Promise.all 方法，等待所有请求完成后，再将它们的结果进行处理。
总结
Promise 的 race 和 all 方法都是非常实用的异步编程解决方案。在使用它们时，需要注意它们的不同特点以及使用方式。如果使用得当，它们可以让我们更加方便地处理异步操作，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6543525b7d4982a6ebd02603