js异步编程的演变：回调函数、Promise、‌async/await‌（代码原理演示）

// 模拟API请求：根据参数返回数据，1秒后执行回调
function requestData(url, callback) {
  setTimeout(() => {
    // 模拟返回数据（比如用户信息、订单等）
    const data = `来自${url}的数据`;
    callback(null, data); // 成功回调：err为null，data为结果
  }, 1000);
}

// 需求：先请求用户信息，再请求订单，最后请求详情
requestData("/api/user", (err, userData) => {
  if (err) return console.error("用户请求失败", err);
  console.log("拿到用户数据：", userData);
  
  // 用用户数据里的userId请求订单
  requestData(`/api/orders?userId=${userData.id}`, (err, orderData) => {
    if (err) return console.error("订单请求失败", err);
    console.log("拿到订单数据：", orderData);
    
    // 用订单id请求详情
    requestData(`/api/orderDetail?orderId=${orderData.id}`, (err, detailData) => {
      if (err) return console.error("详情请求失败", err);
      console.log("拿到详情数据：", detailData);
    });
  });
});

// 用Promise重写请求函数：不再需要回调，直接返回Promise
function requestDataPromise(url) {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = `来自${url}的数据`;
      resolve(data); // 异步成功后，用resolve返回结果
    }, 1000);
  });
}

// 链式调用：按顺序请求
requestDataPromise("/api/user")
  .then((userData) => {
    console.log("拿到用户数据：", userData);
    // 返回下一个Promise，衔接下一个.then
    return requestDataPromise(`/api/orders?userId=${userData.id}`);
  })
  .then((orderData) => {
    console.log("拿到订单数据：", orderData);
    return requestDataPromise(`/api/orderDetail?orderId=${orderData.id}`);
  })
  .then((detailData) => {
    console.log("拿到详情数据：", detailData);
  })
  .catch((err) => {
    // 集中捕获所有环节的错误，不用每个步骤写if(err)
    console.error("某个请求失败：", err);
  });

// 用async/await重写：逻辑顺序和代码顺序完全一致
async function fetchAllData() {
  try {
    // 1. 先请求用户数据：await“等待”Promise完成，再往下走
    const userData = await requestDataPromise("/api/user");
    console.log("拿到用户数据：", userData);
    
    // 2. 用用户数据请求订单：自然衔接，像同步代码一样
    const orderData = await requestDataPromise(`/api/orders?userId=${userData.id}`);
    console.log("拿到订单数据：", orderData);
    
    // 3. 用订单数据请求详情
    const detailData = await requestDataPromise(`/api/orderDetail?orderId=${orderData.id}`);
    console.log("拿到详情数据：", detailData);
    
    return "所有数据请求完成！";
  } catch (err) {
    // 集中捕获所有await环节的错误，和同步代码的try/catch完全一致
    console.error("请求失败：", err);
  }
}

// 调用async函数
console.log("程序开始执行");
const result = fetchAllData();
console.log("等待数据请求..."); // 这行会先执行，证明没有阻塞
result.then((msg) => console.log(msg));

程序开始执行
等待数据请求...
// 1秒后（第一个请求完成）
拿到用户数据：来自/api/user的数据
// 又1秒后（第二个请求完成）
拿到订单数据：来自/api/orders?userId=xxx的数据
// 再1秒后（第三个请求完成）
拿到详情数据：来自/api/orderDetail?orderId=xxx的数据
所有数据请求完成！

// Generator函数：处理三个异步请求
function* fetchGenerator() {
  // yield会暂停函数，返回后面的Promise；恢复时，把Promise的结果赋值给userData
  const userData = yield requestDataPromise("/api/user");
  console.log("拿到用户数据：", userData);
  
  const orderData = yield requestDataPromise(`/api/orders?userId=${userData.id}`);
  console.log("拿到订单数据：", orderData);
  
  const detailData = yield requestDataPromise(`/api/orderDetail?orderId=${orderData.id}`);
  console.log("拿到详情数据：", detailData);
  
  return "完成";
}

// 手动驱动Generator执行
const iterator = fetchGenerator();

// 第一次调用next()：函数执行到第一个yield，返回{ value: Promise, done: false }
iterator.next().value.then((userData) => {
  // 第二次调用next(userData)：把userData传给第一个yield的左边，函数执行到第二个yield
  iterator.next(userData).value.then((orderData) => {
    // 第三次调用next(orderData)：函数执行到第三个yield
    iterator.next(orderData).value.then((detailData) => {
      // 第四次调用next(detailData)：函数执行完，done变为true
      iterator.next(detailData);
    });
  });
});

// Generator自动执行器：接收Generator函数，自动驱动它完成
function runGenerator(generatorFunc) {
  // 1. 创建迭代器
  const iterator = generatorFunc();
  
  // 2. 递归调用next()
  function autoNext(value) {
    // 执行next()，拿到{ value: Promise, done: 布尔值 }
    const result = iterator.next(value);
    
    // 如果执行完了，就退出
    if (result.done) return;
    
    // 如果没执行完，等待Promise完成后，递归调用autoNext
    result.value.then((data) => {
      autoNext(data); // 把Promise的结果传给下一个next()
    }).catch((err) => {
      iterator.throw(err); // 捕获错误，传给Generator的try/catch
    });
  }
  
  // 启动自动执行
  autoNext();
}

// 现在，调用自动执行器就够了，不用手动写嵌套！
runGenerator(fetchGenerator);

console.log("1. 全局同步代码开始");

// async函数
async function asyncDemo() {
  console.log("2. async函数内部同步代码");
  // await后面的Promise会暂停函数，把后续代码放进“微任务队列”
  await Promise.resolve("模拟异步完成"); 
  console.log("5. await之后的代码（微任务）");
}

// 调用async函数
asyncDemo();

// 其他同步代码
console.log("3. 全局同步代码继续");
setTimeout(() => {
  console.log("6. setTimeout回调（宏任务）");
}, 0);
console.log("4. 全局同步代码结束");

1. 全局同步代码开始
2. async函数内部同步代码
3. 全局同步代码继续
4. 全局同步代码结束
5. await之后的代码（微任务）
6. setTimeout回调（宏任务）

// 错误写法：串行执行，总耗时=1秒+1秒=2秒
async function badFetch() {
  const goods = await requestDataPromise("/api/goods"); // 1秒
  const user = await requestDataPromise("/api/user"); // 又1秒
  console.log(goods, user);
}

// 正确写法：并行执行，总耗时=1秒（两个请求同时发）
async function goodFetch() {
  // 用Promise.all同时发起多个请求，await等待所有请求完成
  const [goods, user] = await Promise.all([
    requestDataPromise("/api/goods"),
    requestDataPromise("/api/user")
  ]);
  console.log(goods, user);
}

async function fetchWithError() {
  try {
    const user = await requestDataPromise("/api/user"); // 假设这个请求失败
    console.log("用户数据：", user);
  } catch (err) {
    console.error("用户请求失败：", err); // 只捕获用户请求的错误
  }
  
  // 即使上面失败，这里仍会执行
  const goods = await requestDataPromise("/api/goods");
  console.log("商品数据：", goods);
}

async/await = Generator函数（暂停/恢复） + Promise自动执行器（驱动流程） + 事件循环（调度微任务）