JavaScript中使用Promise.all()和Promise.allSettled()方法

本教學將教您如何在 JavaScript 中使用 Promise 等待。

在本教程中，我將教您有關 Promise.all() 和 Promise.allSettled() 方法以及如何使用它們來處理多個 Promise。

使用 Promise.all() 方法

Promise 物件有三個有用的方法，名稱為then()、catch() 和finally()，您可以使用它們在Promise 完成時執行回調方法。 p>

Promise.all() 方法是一個靜態方法，這意味著它屬於整個類，而不是綁定到該類別的任何特定實例。它接受可迭代的 Promise 作為輸入並傳回單一 Promise 物件。

正如我之前提到的，Promise.all() 方法傳回一個新的 Promise。如果傳遞給該方法的所有承諾都已成功解析，則此新承諾將解析為已確定承諾值的陣列。一旦通過的承諾之一被拒絕，這個新的承諾也將被拒絕。

所有 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 < 0.8) {
      setTimeout(() => {
        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() 方法非常有用。

以上是JavaScript中使用Promise.all()和Promise.allSettled()方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！