javascript - 生成器 + Promise 解释

Question

我一直在研究 Promise 和 Generators，但我陷入了下面的脚本中:

function getFile(file) {
    return new Promise(function (resolve) {
        fakeAjax(file, resolve);
    });
}

function* getFiles() {
    var p1 = getFile('file1');
    var p2 = getFile('file2');
    var p3 = getFile('file3');

    output(yield p1);
    output(yield p2);
    output(yield p3);
}

function runner(gen) {
    var g = gen();
    function run(val) {
        val || undefined;
        var next = g.next(val);
        if(!next.done && !next.value !== undefined) {
            next.value
                .then(function(v) {
                    run(v);
                });
        }
    }
    run();
}

runner(getFiles);

我想弄清楚的是，当我到达 getFiles 上的第一个 yield 时会发生什么？为什么这段代码有效，我不明白。

*编辑:输出只是函数中的 console.log 包装。 fakeAjax 函数根据请求的"file"从对象返回文本。

Answer 1

What I'm trying to figure it out is what happens when I get to the first yield on getFiles? Why does this code work, I don't get it.

yield 做了三件事:

1. 暂停生成器函数的执行
2. 它定义 next() 的调用者将在 value 属性中接收的值。在这种情况下，这就是您做出的 promise 。
3. 它可以选择充当表达式，并将值传递到 next()。这将是您作为参数传递给 next() 的文件名。

yield 就像一个双向管道，既接受值又传递值。

在代码中的第一个 yield 处，它将返回带有 Promise 和暂停的对象，但此时它不会将任何内容记录到控制台 - yield可以暂停表达。当您再次调用 next() 时，它将完成 console.log，然后移至下一个 yield。这可能有点令人困惑，因为通常还会有一次对 next 的调用，从而产生 yields。例如，在此代码中，`next 被调用四次，这就是您获得最后一个 console.log 的原因。

这是一个MCVE我假设近似于您的示例中未定义的函数:

function getFile(file) {
    return new Promise(resolve => setTimeout(() => resolve(file), 1000))
}

function* getFiles() {
    var p1 = getFile('file1');
    var p2 = getFile('file2');
    var p3 = getFile('file3');

    console.log(yield p1); // return promise, then pause, then log value passed to next()
    console.log(yield p2);
    console.log(yield p3);
}

function runner(gen) {
    var g = gen();
    function run(val) {
        var next = g.next(val);     
        if(!next.done && !next.value !== undefined) {
            next.value
                .then(function(v) {
                    run(v);
                });
        }     
    }
    run();
}

runner(getFiles);