資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究在 JavaScript 中使用 async-await 解釋 Promise.all？
像加兩個數字或字串操作這樣的簡單操作在 JavaScript 中順序執行並立即返回結果。但在為現實世界的應用程式編寫程式碼時，我們經常會進行耗時的資料庫呼叫、API 呼叫和其他應用程式呼叫。這些較長的呼叫不會立即返回結果；它們會返回一個 Promise。
Promise 是一個物件，用於表示非同步操作的未來結果。它用於處理非同步程序最終的成功或失敗。例如，如果您在 JavaScript 中從 API 請求某些物件，您將獲得一個 Promise，表示該任務最終會完成或失敗。一段時間後，您將獲得 Promise 的結果，無論它是 fulfilled 還是 rejected。
Promise.all()
Promise.all() 是一種方法，它接受多個 Promise 作為輸入並返回單個 Promise。
Promise 在處理 JavaScript 中程序的非同步特性方面非常有效。
如果所有輸入的 Promise 都已 fulfilled 且沒有被拒絕，則結果將是一個單個 Promise，其中包含來自輸入 Promise 的結果值的陣列。
如果任何輸入的 Promise 被拒絕，那麼我們將立即得到一個被拒絕的 Promise，其中包含 Promise 拒絕中提到的原因。它不會給我們剩餘成功或已解決的 Promise 的結果。
由於 Promise 的結果是一個可迭代的陣列，因此我們可以執行迴圈並根據需要執行操作。
語法
使用者可以使用以下語法在 JavaScript 中使用 Promise.all()。
Promise.all([promise1, promise2, promise3, ….])
Promise.all() 接受一個數組可迭代物件作為輸入。輸入陣列可以包含所有 Promise 或物件。
Async-await
async 關鍵字用於宣告非同步函式，“await”關鍵字可以在該函式的主體中使用。async 和 await 關鍵字一起以更簡潔的程式碼顯示非同步程序行為。
通常，async 函式將具有任意數量的 await 語句或沒有 await 語句。與 try-catch 塊相比，async-await 關鍵字提供了更簡潔的程式碼。async 關鍵字使 JavaScript 函式返回一個 Promise，“await”關鍵字用於等待 Promise。
語法
async function function_name{
let result = await (value);
. . . . . . .
. . . . . . .
}
現在我們已經瞭解了 promise.all() 和 async-await 關鍵字。讓我們看看在 JavaScript 中一起使用 async-await 和 promise.all() 的方法。
Promise.all 與 async-await
在 JavaScript 中使用 Promise.all 方法和 async-await 的語法如下
語法
在 JavaScript 中使用 Promise.all 方法和 async-await 的語法如下：
async function example() {
try {
const results = await Promise.all([promise1, promise2, ...]);
} catch (error) {
// handle error
}
}
這裡promise1、promise2 等是你想要等待的 Promise。如果所有輸入的 Promise 都已 fulfilled，則 Promise.all 方法返回一個已 fulfilled 的 Promise，其中包含所有輸入 Promise 值的陣列。如果任何輸入的 Promise 被拒絕，則 Promise.all Promise 將被拒絕，原因是第一個被拒絕的 Promise。
async 函式示例使用 try/catch 語句來處理錯誤情況，如果任何輸入的 Promise 被拒絕，則執行 catch 塊。
示例 1
讓我們以 Instagram 等社交媒體平臺為例。可以在 Instagram 上執行某些操作，包括點贊、評論和分享。因此，讓我們為點贊、評論和分享等操作建立三個 Promise。讓我們使用promise.all()以及 async 和 await 關鍵字從其他函式訪問這些 Promise。
<html>
<body>
<h2> Using the <i> Promise.all() </i> Method</h2>
<p id="output"> </p>
<script>
let like_promise = () => {
return new Promise((resolve, reject) => {
resolve("Liked ");
});
};
let comment_promise = () => {
return new Promise((resolve, reject) => {
resolve("commented ");
});
};
let share_promise = () => {
return new Promise((resolve, reject) => {
resolve("shared ");
});
};
let main_promise = async () => {
let result = await Promise.all([like_promise(), comment_promise(), share_promise(), ]);
document.getElementById("output").innerHTML = result
};
main_promise();
</script>
</body>
</html>
讓我們來看一個當 Promise 被拒絕時的例子，如果我們考慮一個將部落格釋出到網站的場景。釋出的三個情況是：已釋出部落格、正在進行的部落格和已刪除的部落格。讓我們拒絕已刪除部落格情況下的 Promise 並觀察輸出。
在 JavaScript 中建立此示例的步驟如下。
步驟 1 - 在 JavaScript 中建立一個 post 函式，該函式應該返回一個已 fulfilled 的 Promise。
步驟 2 - 在 JavaScript 中建立一個 progress 函式，該函式也應該返回一個已 fulfilled 的 Promise。
步驟 3 - 在 JavaScript 中建立一個 del 函式，在呼叫時拒絕 Promise。
步驟 4 - 在 JavaScript 中建立一個非同步函式，該函式使用promise.all()透過 await 關鍵字等待所有 Promise。當從promise.all()呼叫 del 函式時，輸出是一個錯誤，拒絕訊息為“post deleted”。
示例 2
<html>
<h2> Using the Promise.all() Method with async-await</h2>
<body>
<p id="output"> </p>
<script>
let post = () => {
return new Promise((resolve, reject) => {
resolve("blog posted");
});
};
let progress = () => {
return new Promise((resolve, reject) => {
resolve("blog in progress");
})
};
let del = () => {
return new Promise((resolve, reject) => {
reject("rejected promise");
});
};
let blog_promise = async () => {
try {
let result = await Promise.all([progress(), post(), del()]);
document.getElementById("output").innerHTML = result
} catch (error) {
document.getElementById("output").innerHTML = error
}
}
blog_promise();
</script>
</body>
</html>
我們學習了在 JavaScript 中使用 async-await 關鍵字的 promise.all() 的工作原理。本教程討論了它們的使用方法以及兩個實際案例，一個關於所有 Promise 都已 fulfilled 的情況，另一個關於 Promise 被拒絕的情況。
5K+ 次瀏覽
