JavaScript异步通信三种玩法实例代码

// 模拟一个"煮咖啡"的异步操作（需要2秒）
function makeCoffee(callback) {
  console.log("开始煮咖啡...");
  // 2秒后执行回调函数（通知咖啡好了）
  setTimeout(() => {
    const coffee = "热拿铁";
    callback(coffee); // 调用回调，把结果传过去
  }, 2000);
}

// 点咖啡时，留个"回调联系方式"
makeCoffee((coffee) => {
  console.log(`咖啡好了：${coffee}，开始喝！`);
});

// 注意：这行代码会先执行（不等咖啡煮好）
console.log("等咖啡的时候，先刷会儿手机...");

// 回调地狱示例（别这么写！）
makeCoffee((coffee) => {
  console.log(`喝了${coffee}`);
  makeBread((bread) => {
    console.log(`吃了${bread}`);
    makeEgg((egg) => {
      console.log(`吃了${egg}，早餐完成！`);
    });
  });
});

// 用 Promise 包装异步操作
function makeCoffee() {
  console.log("开始煮咖啡...");
  // 返回一个 Promise "军令状"
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // 模拟是否成功
      if (success) {
        resolve("热拿铁"); // 成功：兑现承诺
      } else {
        reject("咖啡机坏了！"); // 失败：拒绝承诺
      }
    }, 2000);
  });
}

// 用 .then() 接结果，.catch() 处理错误
makeCoffee()
  .then((coffee) => {
    console.log(`咖啡好了：${coffee}，开始喝！`);
    // 可以继续返回新的 Promise，实现链式调用
    return "喝完咖啡，准备烤面包";
  })
  .then((msg) => {
    console.log(msg);
  })
  .catch((error) => {
    console.log("出错了：", error);
  });

console.log("等咖啡的时候，先刷会儿手机...");

// 还是用上面的 makeCoffee（返回 Promise）
function makeCoffee() {
  console.log("开始煮咖啡...");
  return new Promise((resolve) => {
    setTimeout(() => resolve("热拿铁"), 2000);
  });
}

// 再加一个烤面包的异步函数
function makeBread() {
  console.log("开始烤面包...");
  return new Promise((resolve) => {
    setTimeout(() => resolve("全麦面包"), 1500);
  });
}

// 用 async 声明异步函数，内部可以用 await
async function makeBreakfast() {
  console.log("开始做早餐...");
  
  // 等咖啡做好（await 会"暂停"到 Promise 完成）
  const coffee = await makeCoffee();
  console.log(`咖啡好了：${coffee}`);
  
  // 再等面包烤好（按顺序执行，不嵌套）
  const bread = await makeBread();
  console.log(`面包好了：${bread}`);
  
  return "早餐完成！";
}

// 调用异步函数（返回 Promise）
makeBreakfast().then((result) => {
  console.log(result);
});

console.log("主线程：我先去干别的了...");

// 用 async/await 请求网络数据
async function queryGoodsData() {
  try {
  	  console.log("开始请求");
    // 1. 发请求（await 等响应）
    const response = await fetch("https://suggest.taobao.com/sug?code=utf-8&q=%E5%8D%AB%E8%A1%A3");
    const data = await response.json();
    // 2. 显示结果
    console.log("请求完成，结果数据：", data );

  } catch (error) {
    // 处理错误（比如网络问题）
    console.log("请求失败：", error);
  }
}

// 调用函数
queryGoodsData();
console.log("正在请求数据，稍等...");