面试题：JavaScript中生成器如何实现异步控制流的基本原理

Question

请阐述JavaScript生成器函数的特点，以及它是怎样通过暂停和恢复执行来控制异步操作顺序，从而实现异步控制流的？可以结合简单代码示例说明。

Answer 1

JavaScript生成器函数的特点

1. 函数体可暂停和恢复：生成器函数执行时，遇到yield关键字会暂停执行，返回一个迭代器对象。之后可通过迭代器的next()方法恢复执行。
2. 返回迭代器对象：调用生成器函数不会立即执行函数体，而是返回一个迭代器对象，通过该迭代器来控制函数的执行流程。
3. 可传递值：next()方法可传递参数给生成器函数，这个参数会作为yield表达式的返回值。同时，生成器函数也可以通过return返回值，这个值会作为next()方法返回对象的value属性值。

通过暂停和恢复执行控制异步操作顺序实现异步控制流

生成器函数结合yield关键字暂停执行，等待异步操作完成后，通过next()方法恢复执行，从而控制异步操作顺序。下面是一个简单的代码示例：

function* asyncFlow() {
    // 模拟异步操作1
    yield new Promise((resolve) => {
        setTimeout(() => {
            console.log('异步操作1完成');
            resolve();
        }, 1000);
    });

    // 模拟异步操作2
    yield new Promise((resolve) => {
        setTimeout(() => {
            console.log('异步操作2完成');
            resolve();
        }, 1000);
    });

    console.log('所有异步操作完成');
}

const it = asyncFlow();
it.next().value.then(() => it.next().value.then(() => it.next()));

在上述代码中：

1. asyncFlow是一个生成器函数，内部使用yield暂停执行，等待异步操作完成。
2. 每个yield后面跟一个Promise对象模拟异步操作。
3. 通过it.next()获取迭代器对象并开始执行，it.next().value获取yield返回的Promise对象，通过.then()在Promise完成后调用下一个next()方法，从而按顺序执行异步操作，实现异步控制流。