如何使用 Promise.all() 同時管理多個 Promise

JavaScript 中的非同步程式設計允許資源密集型操作在背景運行，而不會中斷主執行緒。 API 呼叫和檔案處理等操作是一些應該非同步運行的操作。

承諾。 all() 是一個功能強大的函數，可以同時管理這些運算。本文將介紹如何使用 Promise.all()

同時管理多個 Promise

讓我們開始吧。

什麼是承諾

promise 是一個表示非同步事件最終失敗或完成的物件。讓我們來看一個簡單的承諾。

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

promise 接受一個有兩個參數的函數：resolve 和reject。在我們的範例中，如果操作成功（即，如果 userId===1，則 Promise 將解析。如果操作失敗，則 Promise 將被拒絕。

Promise 的生命週期從待定狀態開始，最終要么被實現，要么被拒絕。目前，該承諾仍在等待中。為了使用 Promise，我們呼叫 .then() 來處理結果。

輸出將是使用者資料（如果滿足）或錯誤（如果拒絕）。

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

既然操作成功，承諾就會兌現。

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

如果我們更改 userId 的值，promise 將被拒絕，並且您將收到錯誤 User not found

假設您有多個 Promise，您將像這樣獨立處理每個 Promise：

const promise1 = new Promise((resolve, reject) => resolve(1));
const promise2 = new Promise((resolve, reject) => resolve(2));
const promise3 = new Promise((resolve, reject) => resolve(3));
promise1
  .then((value) => {
    console.log(value);
    promise2
      .then((value) => {
        console.log(value);
        promise3
          .then((value) => {
            console.log(value);
          })
          .catch((err) => {
            console.log("promise3 error", err);
          });
      })
      .catch((err) => {
        console.log("promise2 error", err);
      });
  })
  .catch((err) => {
    console.log("promise1 error", err);
  });

上述執行過程中會出現一些潛在問題：

• 每個 Promise 在前一個 Promise 完成後運行。 Promise2 將在 Promise1 解析後啟動，Promise3 將在 Promise2 解析後啟動；這會減慢執行速度。

• .then 連結中的巢狀結構導致 「回調地獄」，使程式碼更難閱讀和維護。

• 每個錯誤都是獨立處理的，這增加了更多的複雜性。

更好的方法是使用 Promise.all()，它允許 Promise 同時運行，從而提高效能和錯誤處理

使用 Promise.all() 增強非同步操作

Promise.all() 接受可迭代的 Promise 並傳回單一 Promise。文法如下：

Promise.all(iterable)

如果我們使用 Promise.all() 在前面的範例中，我們有這樣的東西：

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values);
  })
  .catch((err) => {
    console.log("promise all error", err);
  });

如您所見，這種方法更簡潔、更容易理解。

JavaScript 是一種單執行緒語言，這表示每段程式碼都會等待前一段程式碼完成後才能執行下一段程式碼。

如果 JavaScript 是單執行緒的，Promise.all() 如何處理多個 Promise？

Promise.all() 遵循並發原則，這意味著所有的 Promise 不一定在同一時刻開始執行，而是在不等待一個 Promise 完成後再開始下一個 Promise 的情況下啟動。

Promise.all() 僅當可迭代中的所有 Promise 都滿足時才會解析，但是，如果可迭代中的任何 Promise 拒絕，Promise.all() 將立即拒絕並忽略其餘 Promise 的結果。

實際例子

Promise.all() 擅長於需要執行多個獨立的非同步操作並等待所有操作完成後再繼續的場景。

讓我們來看看其中一些範例，其中 Promise.all() 可用於提高實際應用程式的效率。

1.從多個API取得數據

考慮一個場景，您正在開發一個同時從兩個不同 API 獲取資料的應用程式。

讓我們嘗試從多個 API 中順序取得數據，並記錄完成請求所需的時間。

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

這是輸出：

處理請求所需的時間為 50.36 毫秒。該執行時間可以改進。為了說明同時發生的好處，讓我們來比較一下使用 Promise.all()
的方法

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

這裡我們使用 Promise.all() 來同時執行多個非同步操作。 Promise.all() 將接受一組 Promise，並在所有 Promise 解決後返回一個 Promise。

這是輸出。

從輸出中，我們可以看到使用Promise.all() 的效率稍高：出現這種改進是因為Promise.all() 允許兩個操作同時啟動，而不是等待一個操作完成後再啟動另一個操作。

在具有更複雜操作或額外 API 呼叫的實際應用程式中，使用 Promise.all() 的效能提升可能更加顯著。

但是，如果你想等待所有的 Promise 都結算，無論它們是履行還是拒絕，你可以使用 Promise.allSettled()

1. 發送多個資料塊 假設您有一組代表客戶回饋或評論的文字區塊，並且您需要透過將其發送到外部 API 進行分析來分析每個區塊的情緒。

在這種情況下，所有資料需要同時發送。在這種情況下，您可以使用 Promise.all() 並發發送所有請求，然後等待所有請求解析後再取得結果。

例如，假設我們需要分析這個樣本資料：

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

這種情況下，需要一次發送所有資料；順序發送資料將非常耗時。相反，我們將使用 Promise.all() 同時啟動多個 API 呼叫。

你會得到這樣的東西：

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

3. 同時讀取和處理多個檔案。

假設您有一個接受使用者批次上傳的應用程式。採取所有必要的措施來驗證檔案後，您可以使用 Promise.all() 並行執行多個檔案讀取。這比按順序逐一讀取每個檔案要高效得多。

如果沒有 Promise.all()，您將必須等待每個檔案完全讀取才能讀取下一個檔案。這會導致更多的處理時間，特別是如果您有大量文件。

但是，使用 Promise.all()，所有檔案讀取操作都會同時啟動，從而節省大量時間並提供出色的使用者體驗。

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

還需要注意的是，當同時讀取許多大檔案時，您應該注意潛在的記憶體問題。

概括

總之，Promise.all() 提供了許多好處，總結如下

更簡潔的程式碼： Promise.all() 讓您的程式碼更易於理解，因為您沒有嵌套的 .then() 鏈。請求在單一 .then() 區塊中處理。

高效率：透過並發發出請求，應用程式的整體效能會提高，因為取得資料所需的總時間會減少。

提升你的 JavaScript 水平

將實用的 JavaScript 技巧和程式碼片段傳送到您的收件匣。加入 1000 名編寫更好程式碼的開發人員行列。

以上是如何使用 Promise.all() 同時管理多個 Promise的詳細內容。更多資訊請關注PHP中文網其他相關文章！