随着前端技术的日新月异，异步编程逐渐成为前端开发的常见需求。在异步编程中，我们常常需要处理多个异步任务，而这些任务往往需要依次执行或者一起执行，这就需要我们判断异步任务的执行状态，以便于我们进行下一步的操作。在 ES6 中，Promise 就为我们提供了一种解决异步编程问题的解决方案。本文将介绍 ES6 中新增的 Promise.allSettled 方法，以及如何使用该方法解决异步任务的状态判断问题。
Promise 简介
Promise 是 ES6 新增加的一种表示异步操作的方式。Promise 对象代表一个异步操作的最终完成（或失败）及其结果的值。Promise 提供了一些方法，用于处理异步操作的状态（pending、fulfilled、rejected），以及异步操作的结果。
Promise 的主要特点如下：
- Promise 对象的状态不受外界影响。 Promise 对象代表一个异步操作，它的状态有三种：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。只有异步操作的结果可以改变 Promise 对象的状态，任何其他操作都无法改变 Promise 对象的状态。
- 一旦 Promise 对象状态变为 fulfilled 或 rejected，其状态就不会再次变更。 Promise 对象的状态一旦变为 fulfilled 或 rejected，就永远不会再次发生变化。
- Promise 对象只有一个结果值。 Promise 对象的结果值一旦确定，就不会再次变化，并且该结果值将被传递给 Promise.then() 方法或 Promise.catch() 方法的回调函数。
如下示例代码演示了 Promise 的基本使用方法：
// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("hello world"); // Promise 对象变为 fulfilled 状态，并传递 resolve 的参数值
reject(new Error("some error")); // Promise 对象变为 rejected 状态，并传递 reject 的参数值
}, 1000);
});
promise.then(
result => {
console.log(result); // 打印 'hello world'
},
error => {
console.error(error.message); // 打印 'some error'
}
);Promise.allSettled 方法
Promise.allSettled() 方法接收一个 Promise 对象数组，并返回一个 Promise 对象，该 Promise 对象在所有 Promise 对象都变为 settled（即 fulfilled 或 rejected）状态后才会被 resolved。该 Promise 对象的返回值是一个对象数组，数组的每个元素都包含 Promise 对象执行结果的信息，如下所示：
- status：Promise 对象状态，可以是 "fulfilled" 或者 "rejected"；
- value：如果 Promise 对象状态为 "fulfilled"，则返回 Promise 对象的结果值；如果 Promise 对象状态为 "rejected"，则返回 Promise 对象抛出的错误对象。
Promise.allSettled() 方法的使用示例如下：
// javascriptcn.com 代码示例
const promises = [
Promise.resolve("promise 1 fulfilled"),
Promise.reject(new Error("promise 2 rejected")),
Promise.resolve("promise 3 fulfilled")
];
Promise.allSettled(promises).then(results => {
results.forEach(result => {
console.log(`Promise status: ${result.status}`);
if (result.status === "fulfilled") {
console.log(`Promise value: ${result.value}`);
} else if (result.status === "rejected") {
console.log(`Promise error: ${result.reason.message}`);
}
});
});上述示例代码中，Promise.allSettled() 方法接收一个 Promise 对象数组 promises，该数组包含 3 个 Promise 对象。第 1 个 Promise 对象被 resolve，第 2 个 Promise 对象被 reject，第 3 个 Promise 对象被 resolve。Promise.allSettled() 方法返回的 Promise 对象在所有 Promise 对象都变为 settled 状态（状态为 fulfilled 或者 rejected）后才会被 resolved。该 Promise 对象的回调函数接收一个参数 results，该参数是一个对象数组，数组的每个元素都包含一个 Promise 对象执行的结果信息。通过遍历 results 数组，可以获取每个 Promise 对象的执行状态及相应的结果。
解决异步任务的状态判断问题
在实际开发中，我们常常需要处理多个异步任务，这些任务的执行顺序和状态往往需要我们进行判断和处理。使用 Promise.allSettled() 方法，可以方便地解决异步任务的状态判断问题，避免了使用多个 Promise 对象和复杂的判断语句。
例如，在一个页面中，我们需要加载多个资源文件，并在所有资源文件加载完成后执行某些操作。可以使用 Promise.allSettled() 方法来解决该问题，如下所示：
// javascriptcn.com 代码示例
const files = [
"https://example.com/file-1.js",
"https://example.com/file-2.js",
"https://example.com/file-3.js"
];
const promises = files.map(file => {
return new Promise((resolve, reject) => {
const script = document.createElement("script");
script.src = file;
script.onload = () => {
resolve(`${file} loaded`);
};
script.onerror = () => {
reject(new Error(`${file} load error`));
};
document.body.appendChild(script);
});
});
Promise.allSettled(promises).then(results => {
const fulfilled = results.filter(result => result.status === "fulfilled");
if (fulfilled.length === files.length) {
console.log("all files loaded");
} else {
console.log("some file load error");
}
});上述代码中，我们声明了一个包含 3 个资源文件的数组 files，然后使用 Promise.allSettled() 方法加载这些文件，并在所有文件加载完成后执行某些操作。在 Promise.allSettled() 方法的回调函数中，我们通过遍历 results 数组，获取每个 Promise 对象的执行状态，并判断是否所有文件都已成功加载。
总结
ES6 中的 Promise.allSettled() 方法为我们解决异步编程中的状态判断问题提供了便利，并可以简化代码逻辑。在实际开发中，我们应该尽量使用 Promise.allSettled() 方法来处理多个异步任务的状态判断问题，提高代码可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fb1409f6b2d6eab31c6c0b