yield 模拟 async/await

您说得对！Generator 的 yield 配合执行器确实可以模拟 await 的效果。让我用一个更直观的例子展示这种对应关系。

Generator 模拟 async/await

// 模拟异步函数
function delay(ms, value) {
    return new Promise(resolve => setTimeout(() => resolve(value), ms));
}

// Generator函数（类似async函数）
function* asyncTask() {
    console.log('开始任务');
    
    const result1 = yield delay(1000, '第一步完成');
    console.log(result1);
    
    const result2 = yield delay(1500, '第二步完成');
    console.log(result2);
    
    return '任务完成';
}

// 执行器（类似await的底层实现）
function runGenerator(genFn) {
    const iterator = genFn();
    
    function handle(result) {
        if (result.done) return Promise.resolve(result.value);
        return Promise.resolve(result.value)
            .then(res => handle(iterator.next(res)))
            .catch(err => iterator.throw(err));
    }
    
    return handle(iterator.next());
}

// 执行Generator
runGenerator(asyncTask).then(finalResult => {
    console.log('最终结果:', finalResult);
});

与async/await的对应关系

Generator写法	async/await写法	说明
function*	async function	声明异步函数
yield	await	暂停执行等待Promise
runGenerator	JavaScript引擎内置	自动执行器

转换为async/await版本

// 同样的异步函数
function delay(ms, value) {
    return new Promise(resolve => setTimeout(() => resolve(value), ms));
}

// async/await版本
async function asyncTask() {
    console.log('开始任务');
    
    const result1 = await delay(1000, '第一步完成');
    console.log(result1);
    
    const result2 = await delay(1500, '第二步完成');
    console.log(result2);
    
    return '任务完成';
}

// 直接调用
asyncTask().then(finalResult => {
    console.log('最终结果:', finalResult);
});

关键区别

1. 语法糖：

   • async/await是Generator+P执行器的语法糖
   • 不需要手动写执行器

2. 错误处理：

   // Generator版本
   function* task() {
       try {
           const res = yield asyncOp();
       } catch(err) {
           // 处理错误
       }
   }
   
   // async/await版本
   async function task() {
       try {
           const res = await asyncOp();
       } catch(err) {
           // 处理错误
       }
   }
   

3. 返回值：

   • Generator函数返回迭代器
   • async函数返回Promise

历史发展

1. 回调地狱 → 2. Promise → 3. Generator → 4. async/await

Generator是JavaScript异步编程演进过程中的重要一步，它让开发者可以用同步的方式写异步代码，最终演变成了更简洁的async/await语法。