Wie kann ich ein Array von URLs mit Promise.all abrufen?

Wenn ich ein array von urls:

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

Und ich bauen möchte, ein Objekt, das aussieht wie dieses:

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

Ich habe versucht zu lernen, dies zu tun mit fetchdie natürlich zurück Promises.

Einige Dinge, die ich versucht habe, das nicht Arbeit:

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

Diese nicht richtig Aussehen, und in jedem Fall funktioniert es nicht — ich am Ende nicht mit einem array ['eins', 'zwei', 'drei'].

Ist mit Promise.all den richtigen Ansatz hier?

InformationsquelleAutor der Frage | 2015-07-29

  1. 53

    Ja, Promise.all ist der richtige Ansatz, aber Sie wirklich brauchen, es sich zweimal, ob Sie möchten, um erste fetch alle urls und dann bekommen alle texts von Ihnen (die wiederum verspricht für den Text der Antwort). So müssten Sie tun,

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

    Deinen aktuellen code nicht funktioniert, da forEach gibt nichts (weder ein array noch ein Versprechen).

    Natürlich können Sie vereinfachen, und starten Sie mit immer den Körper aus jeder Antwort direkt nach der jeweiligen fetch Versprechen erfüllt:

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

    InformationsquelleAutor der Antwort Bergi

  2. 14

    Für einige Grund keiner von Bergi - Beispiele, die für mich gearbeitet. Es würde geben mir einfach leere Ergebnisse. Nach einigem Debuggen es seemes wie das Versprechen würde zurück, bevor der fetch beendet hatte, daher die leeren Ergebnisse.

    Benjamin Gruenbaum hatte hier eine Antwort weiter oben, aber es gelöscht. Seine Methode hat für mich arbeiten, also werde ich einfach copy-paste es hier als alternative für den Fall, jemand anderes läuft in irgendwelche Probleme mit der ersten Lösung hier.

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

    InformationsquelleAutor der Antwort peirix

  3. 4

    Sollten Sie verwenden map statt forEach:

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

    InformationsquelleAutor der Antwort evgenAborigen

Schreibe einen Kommentar