本教程將教您如何在 JavaScript 中使用 Promise 等待。
在本教程中，我將教您有關 Promise.all() 和 Promise.allSettled() 方法以及如何使用它們來處理多個 Promise。
使用 Promise.all() 方法
Promise 對象具有三個有用的方法，名為 then()、catch() 和 finally()，您可以使用它們在 Promise 完成時執行回調方法。 p>
Promise.all() 方法是一個靜態方法，這意味著它屬于整個類，而不是綁定到該類的任何特定實例。它接受可迭代的 Promise 作為輸入并返回單個 Promise 對象。
正如我之前提到的，Promise.all() 方法返回一個新的 Promise。如果傳遞給該方法的所有承諾都已成功解析，則此新承諾將解析為已確定承諾值的數組。一旦通過的承諾之一被拒絕，這個新的承諾也將被拒絕。
立即學習“Java免費學習筆記（深入）”；
所有 Promise 均成功解決
以下是 Promise.all() 方法的示例，其中所有 Promise 均已成功解析：
const promise_a = new Promise((resolve) => { setTimeout(() => { resolve('Loaded Textures'); }, 3000); }); const promise_b = new Promise((resolve) => { setTimeout(() => { resolve('Loaded Music'); }, 2000); }); const promise_c = new Promise((resolve) => { setTimeout(() => { resolve('Loaded Dialogues'); }, 4000); }); const promises = [ promise_a, promise_b, promise_c ]; console.log('Hello, Promises!'); Promise.all(promises).then((values) => { console.log(values); console.log('Start the Game!'); }); /* Output 19:32:06 Hello, Promises! 19:32:10 Array(3) [ "Loaded Textures", "Loaded Music", "Loaded Dialogues" ] 19:32:10 Start the Game! */
我們在調用 Promise.all() 方法之前的語句記錄于 19:32:06。此外，我們的第三個 Promise 名為 promise_c 需要最長的時間才能解決，并在 4 秒后解決。這意味著調用 all() 方法返回的 Promise 也應該需要 4 秒才能解析。我們可以通過將回調函數傳遞給 then() 方法來驗證是否需要 4 秒才能解析。
這里需要注意的另一件重要事情是，返回的已完成值數組包含這些值的順序與我們將 Promise 傳遞給 Promise.all() 方法的順序相同。名為 promise_b 的 Promise 解析速度最快，只需 2 秒。但是，其解析值仍然位于返回數組中的第二個位置。這與我們將 Promise 傳遞給 Promise.all() 方法的位置相匹配。
這種秩序的維護在某些情況下非常有幫助。例如，假設您正在使用十個不同的 Promise 獲取有關十個不同城市的天氣信息。所有這些問題不會同時得到解決，而且不可能事先知道它們的解決順序。但是，如果您知道數據按照傳遞 Promise 的順序返回，您將能夠正確分配它以供以后操作。
一個承諾被拒絕
以下是其中一個承諾被拒絕的示例：
const promise_a = new Promise((resolve) => { setTimeout(() => { resolve('Loaded Textures'); }, 3000); }); const promise_b = new Promise((resolve, reject) => { setTimeout(() => { reject(new Error('Could Not Load Music')); }, 2000); }); const promise_c = new Promise((resolve) => { setTimeout(() => { resolve('Loaded Dialogues'); }, 4000); }); const promises = [ promise_a, promise_b, promise_c ]; console.log('Hello, Promises!'); Promise.all(promises).catch((error) => { console.error(error.message); console.log('Stop the Game!'); }); /* Output 20:03:43 Hello, Promises! 20:03:45 Could Not Load Music 20:03:45 Stop the Game! */
同樣，我們在調用 all() 方法之前的語句記錄于 20:03:43。然而，我們的第二個承諾 promise_b 這次以拒絕告終。我們可以看到 promise_b 在 2 秒后被拒絕。這意味著 all() 方法返回的 Promise 也應該在 2 秒后拒絕，并出現與我們的 promise_b 相同的錯誤。從輸出中可以明顯看出，這正是發生的情況。
與 await 關鍵字一起使用
您可能已經知道 await 關鍵字用于等待承諾解決，然后再繼續下一步。我們還知道 all() 方法返回一個承諾。這意味著我們可以使用 await 以及對 Promise.all() 方法的調用。
唯一要記住的是，由于 await 僅在異步函數和模塊內有效，因此我們必須將代碼包裝在異步函數內，如下所示：
function create_promise(data, duration) { return new Promise((resolve) => { setTimeout(() => { resolve(data); }, duration); }); } const promise_a = create_promise("Loaded Textures", 3000); const promise_b = create_promise("Loaded Music", 2000); const promise_c = create_promise("Loaded Dialogue", 4000); const my_promises = [promise_a, promise_b, promise_c]; async function result_from_promises(promises) { let loading_status = await Promise.all(promises); console.log(loading_status); } result_from_promises(my_promises); /* Outputs 08:50:43 Hello, Promises! 08:50:47 Array(3) [ "Loaded Textures", "Loaded Music", "Loaded Dialogue" ] */
這一次，我們定義了一個名為 create_promise() 的函數，它根據提供的數據和持續時間為我們創建承諾。我們的異步 result_from_promises() 函數使用 await 關鍵字來等待 Promise 解析。
使用 Promise.allSettled() 方法
當您只想在所有承諾成功解決后繼續操作時，使用 Promise.all() 方法是有意義的。例如，當您加載游戲資源時，這可能很有用。
但是，假設您正在獲取有關不同城市天氣的信息。在這種情況下，您可以輸出獲取數據成功的所有城市的天氣信息，并輸出獲取數據失敗的錯誤消息。
Promise.allSettled() 方法在這種情況下效果最好。此方法等待所有通過的承諾通過決議或拒絕來解決。此方法返回的 Promise 包含一個對象數組，其中包含有關每個 Promise 結果的信息。
function create_promise(city) { let random_number = Math.random(); let duration = Math.floor(Math.random()*5)*1000; return new Promise((resolve, reject) => { if (random_number { resolve(`Show weather in ${city}`); }, duration); } else { setTimeout(() => { reject(`Data unavailable for ${city}`); }, duration); } }); } const promise_a = create_promise("Delhi"); const promise_b = create_promise("London"); const promise_c = create_promise("Sydney"); const my_promises = [create_promise("Delhi"), create_promise("London"), create_promise("Sydney"), create_promise("Rome"), create_promise("Las Vegas")]; async function result_from_promises(promises) { let loading_status = await Promise.allSettled(promises); console.log(loading_status); } result_from_promises(my_promises); /* Outputs [ { "status": "fulfilled", "value": "Show weather in Delhi" }, { "status": "fulfilled", "value": "Show weather in London" }, { "status": "fulfilled", "value": "Show weather in Sydney" }, { "status": "rejected", "reason": "Data unavailable for Rome" }, { "status": "fulfilled", "value": "Show weather in Las Vegas" } ] */
如您所見，數組中的每個對象都包含一個 status 屬性，讓我們知道承諾是否已實現或被拒絕。在履行承諾的情況下，它包含 value 屬性中的解析值。在被拒絕的 Promise 的情況下，它在 reason 屬性中包含拒絕的原因。
最終想法
我們了解了 Promise 類的兩個有用方法，它們可以讓您同時處理多個 Promise。當您想要在其中一個 Promise 被拒絕后立即停止等待其他 Promise 解決時， Promise.all() 方法很有用。當您想要等待所有承諾解決時，無論其解決或拒絕狀態如何， Promise.allSettled() 方法非常有用。
