Promise.allSettled() 是一種方法，它採用可迭代的Promise 作為參數，並傳回一個Promise，當可迭代中的所有Promise 都已解決時，該Promise就被實現，這意味著它們已被實現或被拒絕。
當傳回的 Promise 被履行時，它會透過包含已履行或拒絕的 Promise 的資訊的物件陣列來解析。每個物件都有一個狀態屬性（已完成或已拒絕），以及一個值或原因屬性。
例如，如果您有一組代表網路請求的 Promise，並且想了解每個請求的狀態（是否成功），則可以使用 Promise.allSettled() 等待所有請求完成在處理結果之前。
#當您想要處理多個 Promise 的結果時，無論它們是被履行還是被拒絕，使用 Promise.allSettled() 都會很有用。它與 Promise.all() 不同，Promise.all() 只有在所有 Promise 都滿足時才會解決，如果任何 Promise 被拒絕，Promise.all() 就會拒絕。
使用 Promise.allSettled() 的語法如下 -
Promise.allSettled(iterable);
Iterable 是提供給promise.allSettled() 的輸入。可迭代物件是一個包含 Promise 的陣列。
JavaScript 中的 async 和await 關鍵字用於處理非同步程式碼。 async 用在函數定義之前，表示該函數是非同步的，並且會傳回一個 Promise。
async function example() {
// asynchronous code goes here
}
await 用於非同步函數內部以暫停執行，直到滿足指定的 Promise。
async function example() {
const result = await somePromise;
// the rest of the function will execute only after somePromise is fulfilled
}
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() 的兩個可能的用例：
處理網路請求
#處理表單中的使用者輸入
如果你有一個網路請求陣列（例如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 作為輸入。
第 2 步 - 定義 validateForm() 函數，該函數將在提交表單時呼叫。
第 3 步 - 在 validateForm() 函數內，使用 document.getElementById() 檢索輸入欄位的值> 方法。
第 4 步- 使用 validateInput() 函數建立驗證承諾數組，並將輸入欄位值傳遞為參數。
< /里>第 5 步 - 使用 Promise.allSettled() 等待所有驗證 Promise 完成。
第 6 步 - 迭代 Promise.allSettled() 的結果並檢查每個結果物件的 status 屬性。如果任何 Promise 被拒絕，請將 hasErrors 標誌設為 true 並記錄錯誤訊息。
第 7 步 - 如果 hasErrors 標誌為 false，則表單被視為有效並可以提交。如果 hasErrors 標誌為 true，則表單有錯誤，不應提交。
第 8 步 - 將 onsubmit 屬性新增至 HTML 表單中的 form 元素，並將其設定為呼叫 validateForm() 函數。如果 validateForm() 函數傳回 false，請使用 return false 語句阻止提交表單。
<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 的已完成值。
以上是解釋 JavaScript 中的 Promise.allSettled() 和 async-await 嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
