JavaScript 中 async/await 的使用方法，这是 ES2017 引入的异步编程语法糖，目的是让异步代码写起来像同步代码一样直观易读。

一、核心概念理解

async/await 是基于 Promise 实现的，不能脱离 Promise 单独使用：

• async：修饰函数，让函数返回一个 Promise 对象（即使函数内部 return 普通值，也会被包装成 Promise.resolve (值)）。
• await：只能在 async 函数内部使用，作用是等待 Promise 完成：
  • 若 Promise 成功（resolved），await 会拿到 Promise 的返回值；
  • 若 Promise 失败（rejected），await 会抛出错误，需要用 try/catch 捕获。

二、基础使用方法

1. 基本语法示例

先定义一个返回 Promise 的异步函数（比如模拟接口请求），再用 async/await 调用：

// 模拟异步操作（比如请求接口）
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模拟成功返回数据
      resolve({ code: 200, data: "异步数据" });
      // 模拟失败（可取消注释测试）
      // reject(new Error("请求失败"));
    }, 1000);
  });
}

// 使用 async/await 调用异步函数
async function getData() {
  try {
    // 等待 Promise 完成，拿到返回值
    const result = await fetchData();
    console.log("获取数据成功：", result);
  } catch (error) {
    // 捕获 Promise 失败的错误
    console.log("获取数据失败：", error.message);
  }
}

// 执行函数
getData();
// 输出（1秒后）：获取数据成功： { code: 200, data: '异步数据' }

2. 关键细节解释

async 函数的返回值：

async function test() {
  return "hello";
}
// 等同于 return Promise.resolve("hello")
test().then(res => console.log(res)); // 输出：hello

 await 等待非 Promise 值：若 await 后跟的不是 Promise，会直接返回该值（无等待效果）：

async function test() {
  const res = await 123;
  console.log(res); // 输出：123
}
test();

多个 await 顺序执行：多个 await 会按顺序执行（前一个完成才会执行后一个）：

async function multiAwait() {
  console.log("开始");
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log("1秒后");
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log("2秒后");
}
multiAwait();
// 输出：开始 → 1秒后（1秒后） → 2秒后（再等1秒）

多个 await 并行执行：若多个异步操作无依赖，可通过 Promise.all 实现并行，提升效率：

async function parallelAwait() {
  console.log("开始");
  // 先创建所有 Promise（同时触发）
  const p1 = new Promise(resolve => setTimeout(() => resolve("p1完成"), 1000));
  const p2 = new Promise(resolve => setTimeout(() => resolve("p2完成"), 1000));
  // 并行等待所有 Promise 完成
  const [res1, res2] = await Promise.all([p1, p2]);
  console.log(res1, res2); // 1秒后同时输出：p1完成 p2完成
}
parallelAwait();

顶层 await（ES2022 支持）

在模块顶层可直接使用 await（无需包裹 async 函数），适用于模块加载时的异步初始化：

// 模块文件（如 test.js）
const data = await fetchData();
console.log("模块加载时获取数据：", data);
export default data;

三、错误处理

await 捕获错误的两种方式：

1. try/catch（推荐）：捕获单个 / 多个 await 的错误，精准处理：

   async function handleError() {
     try {
       const res1 = await fetchData(); // 若失败，直接进入 catch
       const res2 = await fetchData();
     } catch (err) {
       console.log("错误：", err);
     }
   }

2. Promise.catch：单独处理某个 await 的错误，不影响后续代码：

   async function handleError2() {
     // 单个 await 失败时，用 catch 兜底
     const res = await fetchData().catch(err => {
       console.log("单个请求失败：", err);
       return "默认值"; // 返回兜底值，不中断后续代码
     });
     console.log("后续代码仍执行：", res);
   }

    

总结

1. async 修饰函数，使其返回 Promise；await 只能在 async 函数内使用，等待 Promise 完成并获取结果。
2. await 会阻塞 async 函数内后续代码执行（但不阻塞主线程），无依赖的异步操作建议用 Promise.all 并行执行。
3. 错误处理优先用 try/catch 捕获，或给单个 await 加 .catch 兜底，避免异步错误导致程序崩溃。