数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 async-await 解释 JavaScript 中的 Promise.allSettled()？
Promise.allSettled() 是一种方法，它接受一个 Promise 的可迭代对象作为参数，并返回一个 Promise，当可迭代对象中的所有 Promise 都已完成（settled）时，该 Promise 就会 fulfilled。所谓完成，意味着它们要么 fulfilled 要么 rejected。
当返回的 Promise fulfilled 时，它会解析为一个包含有关 fulfilled 或 rejected Promise 的信息的数组对象。每个对象都有一个 status 属性，值为 fulfilled 或 rejected，以及一个 value 或 reason 属性，分别表示值或原因。
例如，如果您有一个代表网络请求的 Promise 数组，并且想要了解每个请求的状态（成功与否），您可以使用 Promise.allSettled() 等待所有请求完成，然后再处理结果。
Promise.allSettled
当您想要处理多个 Promise 的结果时，无论它们是 fulfilled 还是 rejected，使用 Promise.allSettled() 都很有用。它与 Promise.all() 不同，Promise.all() 只有在所有 Promise 都 fulfilled 时才会 resolve，如果任何一个 Promise rejected 就会 reject。
语法
使用 Promise.allSettled() 的语法如下所示：
Promise.allSettled(iterable);
Iterable 是传递给 promise.allSettled() 的输入。iterable 对象是一个包含 Promise 的数组。
Async-await
JavaScript 中的 async 和 await 关键字用于处理异步代码。async 用于函数定义之前，表示该函数是异步的，并将返回一个 Promise。
语法
async function example() {
// asynchronous code goes here
}
await 用于 async 函数内部，暂停执行，直到指定的 Promise fulfilled。
async function example() {
const result = await somePromise;
// the rest of the function will execute only after somePromise is fulfilled
}
Promise.allSettled 与 async-await
async/await 语法是一种使异步代码看起来和行为更像同步代码的方式，从而使其更易于阅读和编写。它允许您编写看起来和感觉类似于同步代码的异步代码，而无需使用回调或 then() 方法。
您可以使用 async/await 语法等待 Promise.allSettled() 方法解析，然后再访问结果。
以下是如何使用 Promise.allSettled() 与 async/await 的示例：
async function example() {
const promises = [promise1, promise2, promise3];
const results = await Promise.allSettled(promises);
for (const result of results) {
if (result.status === 'fulfilled') {
console.log(result.value);
} else {
console.error(result.reason);
}
}
}
以下是 Promise.allSettled() 在现实世界中可能存在的两种用例
处理网络请求
处理表单中的用户输入
示例 1
如果您有一个网络请求数组（例如 HTTP 请求），并且您想要处理所有请求的结果，无论它们是否成功，都可以使用 Promise.allSettled() 等待所有请求完成，然后再处理结果。
<html>
<body>
<h2> Using the <i> Promise.allSettled() </i> method to handle multiple reuests. </h2>
<button onclick = "getData()"> Fetch Data </button>
<div id = "output"> </div>
<script>
async function getData() {
const requests = [
fetch('https://jsonplaceholder.typicode.com/todos/1'),
fetch('https://jsonplaceholder.typicode.com/todos/2'),
fetch('https://jsonplaceholder.typicode.com/todos/3')
];
const results = await Promise.allSettled(requests);
let output = '';
let count = 0;
for (const result of results) {
if (result.status === 'fulfilled') {
const data = await result.value.json();
output += `<p>Promise ${count+1 } fulfilled</p>`;
} else {
output += `<p>Promise ${count+1} rejected </p>`;
}
count++
}
document.getElementById('output').innerHTML = output;
}
</script>
</body>
</html>
假设您有一个带有输入字段的表单，并且您希望在提交表单之前验证所有字段。在这种情况下，您可以使用 Promise.allSettled() 等待所有验证 Promise 完成，然后再决定是否提交表单。
以下是需要遵循的步骤
步骤 1 − 在 HTML 文档中，编写一个带有输入字段的表单。将其 id 设置为 input。
步骤 2 − 定义validateForm() 函数，该函数将在提交表单时调用。
步骤 3 − 在validateForm() 函数内部，使用document.getElementById() 方法检索输入字段的值。
步骤 4 − 使用validateInput() 函数创建一个验证 Promise 数组，并将输入字段值作为参数传递。
步骤 5 − 使用Promise.allSettled() 等待所有验证 Promise 完成。
步骤 6 − 遍历Promise.allSettled() 的结果，并检查每个结果对象的 status 属性。如果任何 Promise 被 rejected，则将 hasErrors 标志设置为 true 并记录错误消息。
步骤 7 − 如果 hasErrors 标志为 false，则表单被认为有效，可以提交。如果 hasErrors 标志为 true，则表单存在错误，不应提交。
步骤 8 − 在 HTML 表单中的表单元素中添加 onsubmit 属性，并将其设置为调用validateForm() 函数。使用 return false 语句来防止在validateForm() 函数返回 false 时提交表单。
示例 2
<html>
<h2> Using Promise.allSettled with async-await </h2>
<form onsubmit = "validateForm(); return false;">
<label for = "input">Input:</label> <input type = "text" id = "input" required>
<br><br><input type = "submit" value = "Submit"></form>
<p id = "output"></p>
<script >
function validateInput(input) {
return new Promise((resolve, reject) => {
if (input.length > 0) {
resolve();
} else {
reject(new Error('Input is required'));
}
});
}
async function validateForm() {
const input = document.getElementById('input').value;
const validationPromises = [
validateInput(input),
];
const results = await Promise.allSettled(validationPromises);
let hasErrors = false;
for (const result of results) {
if (result.status === 'rejected') {
hasErrors = true;
console.error(result.reason);
}
}
if (!hasErrors) {
// form is valid, submit it
document.getElementById("output").innerHTML="Form Submitted Successfully";
} else {
// form has errors, do not submit it
document.getElementById("output").innerHTML = 'Form has errors';
}
}
</script>
</html>
Promise.allSettled() 可用于各种情况，例如处理网络请求和验证用户输入，并且可以与 async/await 语法或 then() 方法结合使用以处理 Promise 的 fulfilled 值。
7K+ 浏览量
