// 模擬API請求：根據(jù)參數(shù)返回?cái)?shù)據(jù)，1秒后執(zhí)行回調(diào)
function requestData(url, callback) {
  setTimeout(() => {
    // 模擬返回?cái)?shù)據(jù)（比如用戶信息、訂單等）
    const data = `來自${url}的數(shù)據(jù)`;
    callback(null, data); // 成功回調(diào)：err為null，data為結(jié)果
  }, 1000);
}

// 需求：先請求用戶信息，再請求訂單，最后請求詳情
requestData("/api/user", (err, userData) => {
  if (err) return console.error("用戶請求失敗", err);
  console.log("拿到用戶數(shù)據(jù)：", userData);
  
  // 用用戶數(shù)據(jù)里的userId請求訂單
  requestData(`/api/orders?userId=${userData.id}`, (err, orderData) => {
    if (err) return console.error("訂單請求失敗", err);
    console.log("拿到訂單數(shù)據(jù)：", orderData);
    
    // 用訂單id請求詳情
    requestData(`/api/orderDetail?orderId=${orderData.id}`, (err, detailData) => {
      if (err) return console.error("詳情請求失敗", err);
      console.log("拿到詳情數(shù)據(jù)：", detailData);
    });
  });
});

// 用Promise重寫請求函數(shù)：不再需要回調(diào)，直接返回Promise
function requestDataPromise(url) {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = `來自${url}的數(shù)據(jù)`;
      resolve(data); // 異步成功后，用resolve返回結(jié)果
    }, 1000);
  });
}

// 鏈?zhǔn)秸{(diào)用：按順序請求
requestDataPromise("/api/user")
  .then((userData) => {
    console.log("拿到用戶數(shù)據(jù)：", userData);
    // 返回下一個(gè)Promise，銜接下一個(gè).then
    return requestDataPromise(`/api/orders?userId=${userData.id}`);
  })
  .then((orderData) => {
    console.log("拿到訂單數(shù)據(jù)：", orderData);
    return requestDataPromise(`/api/orderDetail?orderId=${orderData.id}`);
  })
  .then((detailData) => {
    console.log("拿到詳情數(shù)據(jù)：", detailData);
  })
  .catch((err) => {
    // 集中捕獲所有環(huán)節(jié)的錯(cuò)誤，不用每個(gè)步驟寫if(err)
    console.error("某個(gè)請求失敗：", err);
  });

// 用async/await重寫：邏輯順序和代碼順序完全一致
async function fetchAllData() {
  try {
    // 1. 先請求用戶數(shù)據(jù)：await“等待”Promise完成，再往下走
    const userData = await requestDataPromise("/api/user");
    console.log("拿到用戶數(shù)據(jù)：", userData);
    
    // 2. 用用戶數(shù)據(jù)請求訂單：自然銜接，像同步代碼一樣
    const orderData = await requestDataPromise(`/api/orders?userId=${userData.id}`);
    console.log("拿到訂單數(shù)據(jù)：", orderData);
    
    // 3. 用訂單數(shù)據(jù)請求詳情
    const detailData = await requestDataPromise(`/api/orderDetail?orderId=${orderData.id}`);
    console.log("拿到詳情數(shù)據(jù)：", detailData);
    
    return "所有數(shù)據(jù)請求完成！";
  } catch (err) {
    // 集中捕獲所有await環(huán)節(jié)的錯(cuò)誤，和同步代碼的try/catch完全一致
    console.error("請求失敗：", err);
  }
}

// 調(diào)用async函數(shù)
console.log("程序開始執(zhí)行");
const result = fetchAllData();
console.log("等待數(shù)據(jù)請求..."); // 這行會(huì)先執(zhí)行，證明沒有阻塞
result.then((msg) => console.log(msg));

程序開始執(zhí)行
等待數(shù)據(jù)請求...
// 1秒后（第一個(gè)請求完成）
拿到用戶數(shù)據(jù)：來自/api/user的數(shù)據(jù)
// 又1秒后（第二個(gè)請求完成）
拿到訂單數(shù)據(jù)：來自/api/orders?userId=xxx的數(shù)據(jù)
// 再1秒后（第三個(gè)請求完成）
拿到詳情數(shù)據(jù)：來自/api/orderDetail?orderId=xxx的數(shù)據(jù)
所有數(shù)據(jù)請求完成！

// Generator函數(shù)：處理三個(gè)異步請求
function* fetchGenerator() {
  // yield會(huì)暫停函數(shù)，返回后面的Promise；恢復(fù)時(shí)，把Promise的結(jié)果賦值給userData
  const userData = yield requestDataPromise("/api/user");
  console.log("拿到用戶數(shù)據(jù)：", userData);
  
  const orderData = yield requestDataPromise(`/api/orders?userId=${userData.id}`);
  console.log("拿到訂單數(shù)據(jù)：", orderData);
  
  const detailData = yield requestDataPromise(`/api/orderDetail?orderId=${orderData.id}`);
  console.log("拿到詳情數(shù)據(jù)：", detailData);
  
  return "完成";
}

// 手動(dòng)驅(qū)動(dòng)Generator執(zhí)行
const iterator = fetchGenerator();

// 第一次調(diào)用next()：函數(shù)執(zhí)行到第一個(gè)yield，返回{ value: Promise, done: false }
iterator.next().value.then((userData) => {
  // 第二次調(diào)用next(userData)：把userData傳給第一個(gè)yield的左邊，函數(shù)執(zhí)行到第二個(gè)yield
  iterator.next(userData).value.then((orderData) => {
    // 第三次調(diào)用next(orderData)：函數(shù)執(zhí)行到第三個(gè)yield
    iterator.next(orderData).value.then((detailData) => {
      // 第四次調(diào)用next(detailData)：函數(shù)執(zhí)行完，done變?yōu)閠rue
      iterator.next(detailData);
    });
  });
});

// Generator自動(dòng)執(zhí)行器：接收Generator函數(shù)，自動(dòng)驅(qū)動(dòng)它完成
function runGenerator(generatorFunc) {
  // 1. 創(chuàng)建迭代器
  const iterator = generatorFunc();
  
  // 2. 遞歸調(diào)用next()
  function autoNext(value) {
    // 執(zhí)行next()，拿到{ value: Promise, done: 布爾值 }
    const result = iterator.next(value);
    
    // 如果執(zhí)行完了，就退出
    if (result.done) return;
    
    // 如果沒執(zhí)行完，等待Promise完成后，遞歸調(diào)用autoNext
    result.value.then((data) => {
      autoNext(data); // 把Promise的結(jié)果傳給下一個(gè)next()
    }).catch((err) => {
      iterator.throw(err); // 捕獲錯(cuò)誤，傳給Generator的try/catch
    });
  }
  
  // 啟動(dòng)自動(dòng)執(zhí)行
  autoNext();
}

// 現(xiàn)在，調(diào)用自動(dòng)執(zhí)行器就夠了，不用手動(dòng)寫嵌套！
runGenerator(fetchGenerator);

console.log("1. 全局同步代碼開始");

// async函數(shù)
async function asyncDemo() {
  console.log("2. async函數(shù)內(nèi)部同步代碼");
  // await后面的Promise會(huì)暫停函數(shù)，把后續(xù)代碼放進(jìn)“微任務(wù)隊(duì)列”
  await Promise.resolve("模擬異步完成"); 
  console.log("5. await之后的代碼（微任務(wù)）");
}

// 調(diào)用async函數(shù)
asyncDemo();

// 其他同步代碼
console.log("3. 全局同步代碼繼續(xù)");
setTimeout(() => {
  console.log("6. setTimeout回調(diào)（宏任務(wù)）");
}, 0);
console.log("4. 全局同步代碼結(jié)束");

1. 全局同步代碼開始
2. async函數(shù)內(nèi)部同步代碼
3. 全局同步代碼繼續(xù)
4. 全局同步代碼結(jié)束
5. await之后的代碼（微任務(wù)）
6. setTimeout回調(diào)（宏任務(wù)）

// 錯(cuò)誤寫法：串行執(zhí)行，總耗時(shí)=1秒+1秒=2秒
async function badFetch() {
  const goods = await requestDataPromise("/api/goods"); // 1秒
  const user = await requestDataPromise("/api/user"); // 又1秒
  console.log(goods, user);
}

// 正確寫法：并行執(zhí)行，總耗時(shí)=1秒（兩個(gè)請求同時(shí)發(fā)）
async function goodFetch() {
  // 用Promise.all同時(shí)發(fā)起多個(gè)請求，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"); // 假設(shè)這個(gè)請求失敗
    console.log("用戶數(shù)據(jù)：", user);
  } catch (err) {
    console.error("用戶請求失敗：", err); // 只捕獲用戶請求的錯(cuò)誤
  }
  
  // 即使上面失敗，這里仍會(huì)執(zhí)行
  const goods = await requestDataPromise("/api/goods");
  console.log("商品數(shù)據(jù)：", goods);
}

async/await = Generator函數(shù)（暫停/恢復(fù)） + Promise自動(dòng)執(zhí)行器（驅(qū)動(dòng)流程） + 事件循環(huán)（調(diào)度微任務(wù)）