ECMAScript 2020 中的 Promise.allSettled 和 Promise.race 方法详解

随着 JavaScript 语言的发展，Promise 已经成为一种常见的处理异步代码的方式。在 ECMAScript 2020 中，Promise 加入了两个新的方法：Promise.allSettled 和 Promise.race，这两个方法可以更好地处理 Promise 的异步操作，提高代码的可读性和可维护性。

Promise.allSettled 方法

Promise.allSettled 方法可以接收多个 Promise 对象，并在它们都完成时返回一个 Promise 对象，这个 Promise 对象返回一个数组，数组中包含了每个 Promise 对象的状态，不论是fulfilled 还是 rejected。

const p1 = Promise.resolve(1);
const p2 = new Promise((resolve, reject) => setTimeout(reject, 100, "error message"));
const p3 = Promise.resolve(true);

Promise.allSettled([p1, p2, p3]).then((results) => {
  console.log(results[0]); // { status: "fulfilled", value: 1 }
  console.log(results[1]); // { status: "rejected", reason: "error message" }
  console.log(results[2]); // { status: "fulfilled", value: true }
});

如果所有的 Promise 对象都fulfilled，那么数组中的每个元素的 status 属性都是 "fulfilled"，value 属性对应着每个 Promise 对象的返回值。如果有任意一个 Promise 对象是 rejected，那么数组中的每个元素的 status 属性都是 "rejected"，reason 属性对应着每个Promise 对象的错误信息。

Promise.race 方法

Promise.race 方法可以接收多个 Promise 对象，并返回一个新的 Promise 对象，这个 Promise 对象会在其中任意一个传递的 Promise 对象成功或失败时，立即返回该 Promise 对象的结果。

const p1 = new Promise((resolve, reject) => setTimeout(resolve, 500, "promise 1"));
const p2 = new Promise((resolve, reject) => setTimeout(resolve, 100, "promise 2"));

Promise.race([p1, p2]).then((result) => {
  console.log(result); // "promise 2"
});

在上面的例子中，Promise.race 返回 p2 的结果，因为 p2 的定时器运行的长度比 p1 的定时器要短。

总结

Promise.allSettled 和 Promise.race 方法在处理异步操作时，提供了非常便捷的方式，使代码更加简洁，可读性更高。了解和掌握这两个方法对于打造高效、简洁的前端代码非常重要。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6590e781eb4cecbf2d62a00d