javascript 中断 for-await 循环完成生成器

Question

我编写了这段代码来迭代具有特定数字（如分页）的 github 问题，在本例中一次有 3 个问题：

const getUrl = (page) => `https://api.github.com/repos/angular/angular/issues?page=${page}`;

const getIssues = async function*() {
    for (let p = 1; true; p++) {
        const url = getUrl(p);
        const rawData = await fetch(url, {
            headers: { 'User-Agent': 'app' }
        });
        const issues = await rawData.json();
        for (let issue of issues) {
            yield issue;
        }
    }
};

const generator = getIssues();

document.querySelector('[data-next]').addEventListener('click', async function() {
    let i = 0;
    for await (let issue of generator) {
        console.log(issue);
        if (++i === 3) break;
    }
    console.log(await generator.next());
});

具有 data-next 属性的元素是一个按钮。预期行为是每次单击按钮都会加载接下来的 3 期。问题是，生成器在中断后完成（console.log 打印此：）{value: undefined, done: true}。

为什么它完成了，我怎样才能使这项工作按预期进行？

Answer 1

这是一个已知的问题/功能，它for..of会终止生成器（请参见此处）。一种可能的解决方案是提供一个代理，它将在闭包中保留实际的生成器状态：

function persist(gen) {
    return {
        next() {
            return gen.next()
        },
        [Symbol.asyncIterator]() {
            return this
        },
        [Symbol.iterator]() {
            return this
        }
    }
}

//

const getUrl = (page) => `https://jsonplaceholder.typicode.com/posts/${page}/comments`;

const getIssues = async function* () {
    for (let p = 1; true; p++) {
        const url = getUrl(p)
        const raw = await fetch(url)
        const data = await raw.json()
        yield* data
    }
};

async function main() {

    const generator = persist(getIssues());
    let i = 0;

    for await (let x of generator) {
        console.log(i, x.postId, x.id, x.name);
        if (++i === 4) break;
    }

    console.log('break'); i = 0;

    for await (let x of generator) {
        console.log(i, x.postId, x.id, x.name);
        if (++i === 4) break;
    }

    console.log('break'); i = 0;

    for await (let x of generator) {
        console.log(i, x.postId, x.id, x.name);
        if (++i === 4) break;
    }

}

main()