如何使用「Promise.all」從 URL 陣列中檢索資料並建立相應的文字內容數組？

利用 Promise.all 檢索 URL 陣列

處理 Web 要求時，從多個來源檢索資料可能是一項常見任務。 Promise.all 是 JavaScript 中的一個有用工具，它允許同時執行多個非同步操作，並將它們的結果合併到一個 Promise 中。

問題：
想像你有一個URL 數組，旨在創建一個鏡像 URL 數組結構但包含每個 URL 文本文件內容的對象。

var urls = ['1.txt', '2.txt', '3.txt']; // These files contain "one", "two", "three" respectively.
var result = ['one', 'two', 'three']; 

接近 Promise.all:
最初嘗試使用 Promise.all 解決此問題時，您可能會遇到困難。讓我們檢查一個有缺陷的方法：

var promises = urls.map(url => fetch(url));
var texts = [];
Promise.all(promises).then(results => {
  results.forEach(result => result.text().then(t => texts.push(t)));
});

這裡，Promise.all 應用於代表獲取請求的 Promise 陣列。但是，這種方法無法如預期產生所需的 ['一', '二', '三'] 陣列。若要修正此問題，請考慮以下改進的解決方案：

Promise.all(urls.map(u => fetch(u))).then(responses =>
  Promise.all(responses.map(res => res.text()))
).then(texts => {
  …
});

此程式碼啟動所有 URL 的取得請求，然後處理回應以擷取每個 URL 的文字內容。結果是可以進一步處理的文字值數組。或者，可以使用現代 JavaScript 功能來簡化程式碼：

const texts = await Promise.all(urls.map(async url => {
  const resp = await fetch(url);
  return resp.text();
}));

這裡利用 async/await 語法來更簡潔地處理非同步操作。

明智地結合使用 Promise.all透過這些技術，您可以有效地從 URL 數組中獲取和處理數據，為後續數據操作任務鋪平道路。

以上是如何使用「Promise.all」從 URL 陣列中檢索資料並建立相應的文字內容數組？的詳細內容。更多資訊請關注PHP中文網其他相關文章！