前端 JS： async， await; Generator

async/await 原理

一、核心原理

1. async 函数：自动返回一个 Promise
2. await 表达式：暂停函数执行，等待 Promise 完成
3. 底层实现 ：基于 Generator + 自动执行器

// async 函数本质上返回一个 Promise
async function foo() {
  return 42
  // 等价于：return Promise.resolve(42)
}

// 验证
console.log(foo() instanceof Promise)  // true
foo().then(value => console.log(value))  // 42

// await 后面跟一个 Promise
async function getData() {
  const data = await fetchData()  // 等待 Promise 完成
  console.log(data)
  return data
}

二、一句话解释

async/await 是 Promise 的语法糖，通过将异步代码转换为同步写法，让开发者用同步的方式写异步代码。

三、关键点

1. async 函数总是返回 Promise
2. await 后面跟 Promise，会暂停当前 async 函数
3. 错误处理可以用 try...catch
4. 不会阻塞主线程，只是暂停当前函数

四、一句话回答

"async/await 基于 Generator 实现暂停和恢复，内部通过 Promise 管理异步状态，让异步代码看起来像同步代码，提高可读性和可维护性。"

Generator 回答

一、一句话定义

Generator 是一种可以暂停和恢复执行的特殊函数，是 ES6 引入的异步编程解决方案之一。

二、核心特点

1. function* 声明
2. yield 暂停执行并返回值
3. next() 恢复执行
4. 返回迭代器对象

三、基本用法

function* gen() {
  yield 1
  yield 2
  return 3
}

const g = gen()
g.next()  // { value: 1, done: false }
g.next()  // { value: 2, done: false }
g.next()  // { value: 3, done: true }

四、暂停恢复原理

• yield 时：保存当前执行上下文（变量、作用域、位置）
• next() 时：恢复保存的上下文继续执行
• 数据传递 ：next(value)的参数作为上一个 yield的返回值

五、主要用途

1. 异步流程控制（async/await 的前身）
2. 生成迭代器（实现自定义遍历）
3. 状态机（管理复杂状态）
4. 惰性求值（按需生成数据）

六、与 async/await 关系

async/await 是 Generator 的语法糖，内置了自动执行器。

七、一句话总结

"Generator 通过 yield 暂停执行、next 恢复执行，实现函数的分步控制，是协程在 JavaScript 中的实现，为 async/await 打下基础。"