极客教程在JavaScript中用async-await解释Promise.allSettled()
Promise.allSettled()是一个方法，它接受一个承诺的迭代表作为参数，并返回一个承诺，当迭代表中的所有承诺都被解决时，该承诺就被履行了，这意味着它们要么被履行要么被拒绝。
当返回的承诺被履行时，它被解析为一个包含已履行或已拒绝承诺信息的对象数组。每个对象都有一个状态属性，要么已履行，要么已拒绝，以及一个值或原因属性。
例如，如果你有一个代表网络请求的承诺数组，并想知道每个请求的状态（是否成功），你可以使用Promise.allSettled()来等待所有的请求完成后再处理结果。
Promise.allSettled
当你想处理多个承诺的结果时，使用Promise.allSettled()可以很有用，不管它们是被履行还是被拒绝。它与Promise.all()不同，后者只在所有的承诺都实现的情况下才会解决，如果有任何承诺被拒绝，就会拒绝。
语法
使用Promise.allSettled()的语法如下—-。
Promise.allSettled(iterable);
Iterable是给promise.allSettled()的一个输入。iterable对象是一个包含promise的数组。
async-await
JavaScript中的async和await关键字，用于处理异步代码。async用在函数定义前，表示该函数是异步的，将返回一个承诺。
语法
async function example() {
// asynchronous code goes here
}
await被用在异步函数中，用来暂停执行，直到指定的承诺被实现。
async function example() {
const result = await somePromise;
// the rest of the function will execute only after somePromise is fulfilled
}
使用async-await的Promise.allSetlled
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 += `Promise {count+1 } fulfilled</p>`;
} else {
output += `<p>Promise{count+1} rejected </p>`;
}
count++
}
document.getElementById('output').innerHTML = output;
}
</script>
</body>
</html>
假设你有一个带输入字段的表单，你想在提交表单之前验证所有的字段。在这种情况下，你可以使用Promise.allSettled()来等待所有验证承诺的完成，然后再决定是否提交表单。
以下是应遵循的步骤。
- 第1步 – 在一个HTML文档中，写一个带有输入字段的表单。给它id作为输入。
-
第2步 – 定义validateForm()函数，当表单被提交时，该函数将被调用。
-
第3步 – 在validateForm()函数中，使用document.getElementById()方法检索输入字段的值。
-
第4步 – 使用validateInput()函数创建一个验证承诺数组，将输入字段的值作为一个参数传给它。
-
第5步 – 使用Promise.allSettled()来等待所有验证承诺的完成。
-
第6步 – 遍历Promise.allSettled()的结果，检查每个结果对象的状态属性。如果有任何承诺被拒绝，将hasErrors标志设置为true并记录错误信息。
-
第7步 – 如果hasErrors标志是假的，则认为该表单是有效的，可以提交。如果hasErrors标志为真，则表示该表单有错误，不应提交。
-
第8步 – 在HTML表单中的表单元素上添加一个onsubmit属性，并将其设置为调用validateForm()函数。如果validateForm()函数返回错误，使用return 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">
<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()方法相结合，处理承诺的履行值。