首頁 > 文章 > web前端 > 解釋 JavaScript 中的 Promise.allSettled() 和 async-await 嗎？

解釋 JavaScript 中的 Promise.allSettled() 和 async-await 嗎？

WBOY轉載: 2023-08-30 23:53:021202瀏覽

解释 JavaScript 中的 Promise.allSettled() 和 async-await 吗？

Promise.allSettled() 是一種方法，它採用可迭代的Promise 作為參數，並傳回一個Promise，當可迭代中的所有Promise 都已解決時，該Promise就被實現，這意味著它們已被實現或被拒絕。

當傳回的 Promise 被履行時，它會透過包含已履行或拒絕的 Promise 的資訊的物件陣列來解析。每個物件都有一個狀態屬性（已完成或已拒絕），以及一個值或原因屬性。

例如，如果您有一組代表網路請求的 Promise，並且想了解每個請求的狀態（是否成功），則可以使用 Promise.allSettled() 等待所有請求完成在處理結果之前。

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
}

Promise.allSetlled 與 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 作為輸入。
第 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 語句阻止提交表單。

範例 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 的已完成值。

以上是解釋 JavaScript 中的 Promise.allSettled() 和 async-await 嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html 对象 promise 异步 http

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：ES2022 JavaScript at() 方法下一篇：ES2022 JavaScript at() 方法

看更多