javascript - 循环访问 JavaScript 生成器函数

Question

我正在尝试使用 JavaScript 生成器函数从数据库获取数据。但每一步都取决于之前的数据。我使用了 Wes Bos 的 ES6.io 类(class)中的一个示例，其中它做了类似的事情，看起来像

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

这非常有效。问题是这取决于 dataGen 是否全局可用。我需要在一个函数内完成所有这些工作。如何在循环中从另一个函数调用 dataGen ？我正在寻找类似的东西:

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);
    }
}

理想情况下，getInfo() 调用能够启动生成器，并能够将每一步的数据传递到下一步，以便正确填写数据。

有什么建议吗？我可以使用 ES6 函数或功能，但没有更高的。

这是浏览器控制台中的输出，显示当我尝试执行第二个选项(我希望使用的选项)时会发生的情况:

Answer 1

这里棘手的部分是 ajax 函数不会返回任何内容，即使返回，也不会立即返回数据。

所以，为了做你正在寻找的事情，我们必须将 promise 逻辑移到我们的循环中。我们可以完全摆脱 ajax() 并直接使用 fetch:

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();