JavaScript异步编程之Async/Await用法完全指南

getData(function(data1) {
    process(data1, function(data2) {
        save(data2, function(data3) {
            display(data3, function() {
                // 更多嵌套...
                console.log("完成了，但代码已经看不懂了！");
            });
        });
    });
});

getData()
    .then(process)
    .then(save)
    .then(display)
    .then(() => console.log("完成"))
    .catch(error => console.error("出错：", error));

// 2015年：Generator + Promise
function* asyncGenerator() {
    const data1 = yield getData();
    const data2 = yield process(data1);
    const data3 = yield save(data2);
    yield display(data3);
    console.log("完成");
}

// 需要外部执行器
function run(generator) {
    const iterator = generator();
    function handle(result) {
        if (result.done) return;
        result.value.then(data => {
            handle(iterator.next(data));
        });
    }
    handle(iterator.next());
}

// 2017年：Async/Await
async function handleData() {
    try {
        const data1 = await getData();
        const data2 = await process(data1);
        const data3 = await save(data2);
        await display(data3);
        console.log("完成");
    } catch (error) {
        console.error("出错：", error);
    }
}

// 在函数前加上 async，这个函数就变成了异步函数
async function normalFunction() {
    return "Hello Async";  // 自动包装成Promise
}

// 等价于：
function normalFunction() {
    return Promise.resolve("Hello Async");
}

// 使用
normalFunction().then(console.log);  // "Hello Async"

async function fetchUser() {
    // await 会暂停函数执行，等待Promise完成
    const response = await fetch('https://api.example.com/user');
    const user = await response.json();
    return user;
}

// await 只能在 async 函数内部使用
// 下面的代码会报错：
// const data = await fetchUser();  // ❌ 错误

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

async function example() {
    console.log("开始");
    
    await delay(1000);  // 等待1秒
    console.log("1秒后");
    
    await delay(2000);  // 再等待2秒
    console.log("再过2秒后");
    
    return "任务完成";
}

// 调用
example().then(result => console.log(result));
// 输出：
// 开始
// 1秒后
// 再过2秒后
// 任务完成

async function getScoreAsync() {
  try {
    // 成功：执行try里的代码，失败：跳转到catch
    const score = await getScore(); 
    console.log("分数：", score);
  } catch (error) {
    // 捕获Promise的reject错误
    console.log("出错了：", error);
  }
}

// 测试：如果getScore返回reject（比如分数50），会执行catch
getScoreAsync();

// 模拟两个异步请求
function getUser() {
  return new Promise((resolve) => setTimeout(() => resolve({ id: 1 }), 500));
}
function getCourse(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      userId === 1 ? resolve({ name: "语文" }) : reject("用户不存在");
    }, 500);
  });
}

// 用async/await调用，统一捕获错误
async function getInfo() {
  try {
    const user = await getUser(); // 第一个异步操作
    const course = await getCourse(user.id); // 第二个异步操作
    console.log("用户课程：", course); // 输出：{ name: "语文" }
  } catch (error) {
    console.log("错误：", error); // 任何一个异步失败，都会走到这里
  }
}

getInfo();

// 封装3个异步请求（返回Promise）
function login() {
  return new Promise(resolve => setTimeout(() => resolve({ id: 1 }), 500));
}
function getCourse(userId) {
  return new Promise(resolve => setTimeout(() => resolve({ id: 10 }), 500));
}
function getScore(courseId) {
  return new Promise(resolve => setTimeout(() => resolve({ score: 90 }), 500));
}

// async/await版本：同步写法，异步执行
async function getStudentInfo() {
  try {
    const user = await login(); // 登录
    const course = await getCourse(user.id); // 查课程
    const score = await getScore(course.id); // 查成绩
    console.log("最终成绩：", score); // 输出：{ score: 90 }
  } catch (error) {
    console.log("出错了：", error);
  }
}

getStudentInfo();

// 错误示例：串行执行（总耗时=1s+1s=2s）
async function badDemo() {
  const res1 = await new Promise(resolve => setTimeout(() => resolve(1), 1000));
  const res2 = await new Promise(resolve => setTimeout(() => resolve(2), 1000));
  console.log(res1, res2); //  // 总时间 = 2个请求时间之和=2s
}

// 正确示例：并发执行（总耗时=1s）
async function goodDemo() {
  // 1. 先创建两个Promise对象（不要先await）
  const promise1 = new Promise(resolve => setTimeout(() => resolve(1), 1000));
  const promise2 = new Promise(resolve => setTimeout(() => resolve(2), 1000));
  
  // 2. 用Promise.all并发执行，await等待所有完成
  const [res1, res2] = await Promise.all([promise1, promise2]);
  console.log(res1, res2); // 总耗时1秒
}

// 串行执行：总耗时3秒（1+1+1）
async function loopDemo() {
  const list = [1, 2, 3];
  for (const item of list) {
    await new Promise(resolve => setTimeout(() => {
      console.log(item);
      resolve();
    }, 1000));
  }
}

//  map + Promise.all（并行） 并发执行：总耗时1秒
async function loopDemo() {
  const list = [1, 2, 3];
  // 1. 收集所有Promise
  const promises = list.map(item => 
    new Promise(resolve => setTimeout(() => {
      console.log(item);
      resolve();
    }, 1000))
  );
  // 2. 并发执行
  await Promise.all(promises);
}

// 全局作用域使用await（ES模块环境）
(async () => {
  const score = await getScore();
  console.log(score);
})();