「Promise.all」を使用して URL の配列からデータを取得し、対応するテキスト コンテンツの配列を作成するにはどうすればよいですか?

URL の配列を取得するための Promise.all の利用

Web リクエストを処理する場合、複数のソースからデータを取得するのが一般的なタスクとなることがあります。 Promise.all は、複数の非同期操作を同時に実行し、その結果を 1 つの Promise に結合できる JavaScript の便利なツールです。

問題:
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 の配列に適用されています。ただし、このアプローチでは、意図したとおりに ['one', 'two', 'three'] の配列を生成できません。これを修正するには、次の洗練されたソリューションを検討してください。

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 中国語 Web サイトの他の関連記事を参照してください。