async 和 await

参考学习地址

async 和 await 是简化异步编程的语法糖, 通过同步代码结构实现异步操作

1. 定义 async 函数
   async 函数通过 async 关键字标记，返回一个 Promise 对象：

async function getData() {
  return "Hello World"; // 返回的值会被包装成 Promise.resolve("Hello World")
}
getData().then(result => console.log(result)); // 输出 "Hello World" :ml-citation{ref="4,8" data="citationList"}

2. 使用 await 等待异步操作
   await 必须在 async 函数内部使用，用于等待 Promise 完成：

async function fetchData() {
  const response = await fetch('https://api.example.com/data'); // 等待网络请求完成
  const data = await response.json(); // 等待解析 JSON
  return data;
}

3. 错误处理
   用 try...catch 捕获异步操作中的错误：

async function loadUser() {
  try {
    const response = await fetch('https://api.example.com/user');
    if (!response.ok) throw new Error('请求失败');
    return await response.json();
  } catch (error) {
    console.error('加载用户失败:', error);
    return null;
  }
}

此方式替代了传统 Promise 的 .catch() 链式调用。

4. 顺序执行异步操作
   多个 await 按顺序执行，适用于有依赖关系的异步任务：

async function processOrder() {
  const user = await getUser(userId);    // 先获取用户信息
  const order = await getOrder(user.id); // 再根据用户 ID 获取订单
  return { user, order };
}

每一步等待上一步完成后执行

注意事项
1. 必须成对使用：await 必须在 async 函数内部。

2. 返回值为 Promise：即使函数内返回非 Promise 值，也会被包装成 Promise。
3. 避免阻塞：await 不会阻塞主线程，但会暂停当前 async 函数的执行，直到 Promise 完成.

🌰:

function test() {
    return new Promise(((resolve, reject) => {
        //假装是你的异步任务：
        const isSuccess = true
        if (isSuccess)
            resolve('异步任务2成功')
        else
            reject('异步任务2失败')
    }))
}

async function main() {
    //任务1，3，4是同步任务
    console.log('任务1')
    const data = await test();
    console.log(data)
    console.log('任务3')
}

// 调用 
main()
console.log("任务4")

打印:
任务 1
任务 4
任务2成功
任务 3

完整示例：用户登录流程

async function login(username, password) {
  try {
    // 1. 验证用户
    const user = await validateUser(username);
    // 2. 检查密码
    const isValid = await checkPassword(user.id, password);
    if (!isValid) throw new Error('密码错误');
    // 3. 获取权限
    const permissions = await fetchPermissions(user.id);
    return { user, permissions };
  } catch (error) {
    console.error('登录失败:', error);
    throw error; // 重新抛出错误供外部处理
  }
}