JSPromiseAll詳解

隨著 JavaScript 發展，我們已經獲得了許多強大的新功能。其中一個新特性是 Promise。

Promise 是一個對非同步或延遲計算的抽象概念，它允許您根據所選條件決定是否執行一段代碼。該代碼可能有一個成功的結果或一個錯誤的原因，但是在執行後狀態不會改變。

一、PromiseAll是什麼

Promise.all() 是 Promise 中的一個非常有用的函數。它將多個 Promise 組合在一起並在所有 Promise 就緒後返回一個新的 Promise 對象。

假設您有一些非同步操作或延遲計算，您希望在所有操作完成後執行任務。可能的情況是您想從多個數據源讀取數據，並且僅在所有數據可用時執行應用程序邏輯。此時，Promise.all() 就可以發揮作用。

首先，讓我們看一個示例：您有兩個從資料庫和遠程 API 獲取數據的函數，您需要等待兩個函數都返回成功後，才能處理結果：

function getFromDatabase() {
  return new Promise(resolve => {
    // Your code to fetch from database here
    resolve('Data from database');
  });
}

function getFromApi() {
  return new Promise(resolve => {
    // Your code to fetch from remote API here
    resolve('Data from API');
  });
}

Promise.all([getFromDatabase(), getFromApi()])
  .then(([database, api]) => {
    console.log(database, api);
    // Your code to use the results here
  });

在這個例子中，我們傳遞了一個數組，由兩個 Promise 對象組成：一個從資料庫獲取數據，另一個從遠程 API 獲取數據。我們在 Promise.all() 的結果中使用數組解構來訪問解析後的數據。

二、PromiseAll使用注意事項

在使用 Promise.all() 時，您應該小心避免以下兩點：

1、任何一個 Promise 為拒絕狀態的情況處理

如果您傳遞給 Promise.all() 的任何一個 Promise 是拒絕狀態，結果 Promise 將與該 Promise 相同的理由拒絕。這意味著如果其中一個操作失敗，整個組合操作都將失敗。

const promise1 = new Promise(resolve => setTimeout(resolve, 1000));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 500));

Promise.all([promise1, promise2])
  .then(values => console.log(values))
  .catch(error => console.error(error));

在此示例中，promise2 拒絕了原因為一個錯誤，因此整個 Promise.all() 被拒絕。

2、不應該過度使用 Promise.all()

在使用 Promise.all() 時，需要注意您的操作是否會導致性能影響。例如，如果您在過多的數組上使用它，可能會影響應用程序性能。

每個 JavaScript 運行時都有不同的限制，因此使用大量 Promise.all() 可能會導致意外的結果。

三、PromiseAll的示例

下面是 Promise.all() 的一個更完整的示例。

您的應用程序需要從兩個不同的 API 獲取數據。有了 Promise.all()，您可以等待它們都就緒，然後執行其他邏輯。

const fetchUsers = () => {
  return fetch('https://jsonplaceholder.typicode.com/users').then(res => res.json());
}

const fetchPosts = () => {
  return fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json());
}

Promise.all([fetchUsers(), fetchPosts()]).then(([users, posts]) => {
  console.log(users);
  console.log(posts);
  // Your code to use the results here
});

四、總結

Promise.all() 是一個非常強大的函數，能夠將多個 Promise 組合在一起並在所有結果返回後提供一個新的 Promise 對象。

在使用 Promise.all() 時，請注意在其中任何一個 Promise 不成功或適用時操作的意外影響。在正確使用 Promise.all() 的情況下，它將成為您的非同步代碼操作中的有用工具。