Comment puis-je utiliser « Promise.all » pour récupérer des données à partir d'un tableau d'URL et créer un tableau correspondant de contenu textuel ?

Utiliser Promise.all pour récupérer un tableau d'URL

La récupération de données à partir de plusieurs sources peut être une tâche courante lors du traitement de requêtes Web. Promise.all est un outil utile en JavaScript qui permet d'exécuter simultanément plusieurs opérations asynchrones et de combiner leurs résultats en une seule promesse.

Le problème :
Imaginez que vous ayez un tableau d'URL et visent à créer un objet qui reflète la structure du tableau d'URL mais avec le contenu du fichier texte de chaque URL.

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

Approche avec Promise.all :
Lorsque vous essayez initialement de résoudre ce problème en utilisant Promise.all, vous pouvez rencontrer des difficultés. Examinons une approche erronée :

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

Ici, Promise.all est appliqué à un tableau de promesses représentant des requêtes de récupération. Cependant, cette approche ne parvient pas à produire le tableau souhaité de ['un', 'deux', 'trois'] comme prévu. Pour remédier à ce problème, envisagez ces solutions raffinées :

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

Ce code lance des requêtes de récupération pour toutes les URL, suivi du traitement des réponses pour récupérer le contenu textuel de chaque URL. Le résultat est un tableau de valeurs de texte qui peuvent être traitées ultérieurement. Alternativement, le code peut être simplifié à l'aide de fonctionnalités JavaScript modernes :

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

Ici, la syntaxe async/wait est utilisée pour gérer les opérations asynchrones de manière plus concise.

Employer Promise.all judicieusement en conjonction avec Grâce à ces techniques, vous pouvez récupérer et traiter efficacement les données d'un ensemble d'URL, ouvrant ainsi la voie à des tâches ultérieures de manipulation de données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!