Comment puis-je récupérer un tableau d'URL avec Promise.all?

Question

Si j'ai un tableau de urls:

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

Et je veux construire un objet qui ressemble à ceci:

var text = ['one', 'two', 'three']; 

J'ai essayé d'apprendre à faire avec fetch, qui bien sûr renvoie Promise s.

Certaines choses que j'ai essayé que ne le font pas travail:

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

Cela ne semble pas juste, et en tout cas, il ne fonctionne pas - je ne finis pas avec un array ['un', 'deux', 'trois'].

Est-ce que la Promise.all utilise la bonne approche ici?

Answer 1

Oui, Promise.all est la bonne approche, mais vous devez en fait deux fois si vous voulez d'abord fetch tous les urls et obtenir tous les text s d'eux (qui sont à nouveau promesses pour le corps de la réponse). Donc, vous auriez besoin de faire

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

Votre code actuel ne fonctionne pas parce que rien forEach rendement (ni un tableau, ni une promesse).

Bien sûr, vous pouvez simplifier cela et commencer à obtenir le corps de chaque réponse juste après la promesse respective chercher remplie:

Promise.all(urls.map(url => 
    fetch(url).then(resp => resp.text()) 
)).then(texts => { 
    … 
}) 

Answer 2

Pour une raison quelconque, ni des exemples de bergi ont travaillé pour moi. Cela me donnerait simplement des résultats vides. Après un débogage, il semble que la promesse reviendrait avant que le fetch soit terminé, d'où les résultats vides. Cependant, Benjamin Gruenbaum avait une réponse ici plus tôt, mais l'a supprimée. Sa méthode a fait travail pour moi, donc je vais simplement copier-coller ici, comme une alternative au cas où quelqu'un d'autre rencontre des problèmes avec la première solution ici.

var promises = urls.map(url => fetch(url).then(y => y.text())); 
Promise.all(promises).then(results => { 
    // do something with results. 
}); 

Answer 3

Vous devez utiliser map au lieu de forEach:

Promise.all(urls.map(url => fetch(url))) 
.then(resp => Promise.all(resp.map(r => r.text()))) 
.then(result => { 
    // ... 
});