面试题：JavaScript 生成器与 Promise 在异步编程中的协作应用

Question

请编写一段代码，结合 JavaScript 生成器和 Promise 来实现以下功能：依次发起三个异步请求，每个请求都返回一个 Promise。使用生成器来控制请求的顺序，使得前一个请求完成后再发起下一个请求，并且在所有请求都完成后返回一个汇总的结果。解释生成器函数与 Promise 之间是如何相互配合来实现这种异步流程控制的。

Answer 1

function asyncRequest1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Result of request 1');
        }, 1000);
    });
}

function asyncRequest2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Result of request 2');
        }, 1000);
    });
}

function asyncRequest3() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Result of request 3');
        }, 1000);
    });
}

function* requestGenerator() {
    const result1 = yield asyncRequest1();
    const result2 = yield asyncRequest2();
    const result3 = yield asyncRequest3();
    return [result1, result2, result3];
}

function runGenerator(generator) {
    const gen = generator();
    function step(result) {
        let { value, done } = gen.next(result);
        if (done) {
            return Promise.resolve(value);
        }
        return Promise.resolve(value).then(step);
    }
    return step();
}

runGenerator(requestGenerator).then((results) => {
    console.log(results);
});

生成器函数与 Promise 配合解释

1. 生成器函数暂停执行：生成器函数requestGenerator使用yield关键字暂停执行，并返回一个Promise对象。例如yield asyncRequest1()，这里asyncRequest1()返回一个Promise，生成器函数暂停，等待这个Promise被解决。
2. Promise解决后恢复生成器：在runGenerator函数中，通过Promise.resolve(value).then(step)，当Promise解决（resolved）后，将Promise的结果作为参数传递给生成器的next方法，恢复生成器函数的执行。
3. 依次执行请求：每次生成器恢复执行后，遇到下一个yield又会暂停，等待下一个Promise解决，如此循环，从而实现了依次发起异步请求。
4. 汇总结果：当所有yield的Promise都解决后，生成器函数执行完毕，return返回汇总的结果，runGenerator函数返回的Promise也随之解决，得到最终汇总的结果。