Schleife durch eine JavaScript-Generator-Funktion

Question

Ich versuche, eine JavaScript-Generatorfunktion zu verwenden, um Daten aus einer Datenbank abzurufen. Aber jeder Schritt hängt von den Daten ab, die davor liegen. Früher habe ich ein Beispiel von Wes Bos ES6.io natürlich und dass tut es etwas ähnlich und sieht aus wie

function ajax(url) { 
    fetch(url).then(data => data.json()).then(data => dataGen.next(data)) 
} 

function* steps() { 
    console.log('fetching beers'); 
    const beers = yield ajax('http://api.react.beer/v2/search?q=hops&type=beer'); 
    console.log(beers); 

    console.log('fetching user'); 
    const user = yield ajax('https://api.github.com/users/[user]'); 
    console.log(user); 

    console.log('fetching fat joe'); 
    const fatJoe = yield ajax('https://api.discogs.com/artists/51988'); 
    console.log(fatJoe); 
} 

const dataGen = steps(); 
dataGen.next(); // kick it off 

Dieses perfekt funktioniert. Das Problem ist, dass dies davon abhängt, dass dataGen global verfügbar ist. Ich muss das alles in einer Funktion machen. Wie kann ich das dataGen in einer Schleife aber von einer anderen Funktion nennen? Ich suche nach etwas ähnlich wie diesem:

function ajax(url) { 
    fetch(url).then(data => data.json()).then(data => dataGen.next(data)) 
} 

function* steps() { 
    console.log('fetching beers'); 
    const beers = yield ajax('http://api.react.beer/v2/search?q=hops&type=beer'); 
    console.log(beers); 

    console.log('fetching user'); 
    const user = yield ajax('https://api.github.com/users/[user]'); 
    console.log(user); 

    console.log('fetching fat joe'); 
    const fatJoe = yield ajax('https://api.discogs.com/artists/51988'); 
    console.log(fatJoe); 
} 

function getInfo() { 
    const dataGen = steps(); 
    for (const data of dataGen) { 
     console.log(data); 
    } 
} 

der getInfo() Anruf würde im Idealfall der Lage sein, um den Generator zu beginnen und in der Lage auf den nächst man die Daten von jedem Schritt zu übergeben, so dass die Daten gefüllt werden richtig aus.

Irgendwelche Vorschläge? Ich kann ES6 Funktionen oder Funktionalität verwenden, aber nichts höher.

Hier ist die Ausgabe im Browser-Konsole für das, was passiert, wenn ich versuche, die zweite Option zu tun, liebe die, die ich würde arbeiten lassen:

Answer 1

Der schwierige Teil ist hier, dass das Ajax Die Funktion gibt nichts zurück, und wenn dies der Fall ist, gibt sie die Daten nicht sofort zurück.

Also, um zu tun, was Sie suchen, müssen wir die Versprechungslogik in unsere Schleife verschieben. Wir können von ajax() ganz loszuwerden und benutzen Sie einfach direkt holen:

function* steps() { 
    const beers = yield fetch('http://api.react.beer/v2/search?q=hops&type=beer'); 
    const user = yield fetch('https://api.github.com/users/wesbos'); 
    const fatJoe = yield fetch('https://api.discogs.com/artists/51988'); 
} 

function getInfo() { 
    const dataGen = steps(); 
    for(const promise of dataGen) { 
    promise.then(data => data.json()).then(data => { 
     console.log(data); 
     dataGen.next(data); 
    }); 
    } 
} 

getInfo();