JavaScript中的async/await怎么用？

async/await是JavaScript ES2017引入的异步编程解决方案，本质是Promise的语法糖，能够用同步代码的写法处理异步逻辑，大幅降低异步代码的阅读和维护成本。它主要由async函数和await表达式两部分组成，下面我们逐步讲解具体的使用方法。

async函数的基本定义

async关键字用于声明一个异步函数，被async修饰的函数会返回一个Promise对象，函数内部返回值会被自动包装成Promise的resolve结果。即使函数内部没有显式返回Promise，返回值也会被包裹到Promise中。

// 普通async函数定义
async function getData() {
  return 'hello async';
}

// 调用async函数，返回的是Promise对象
getData().then(res => {
  console.log(res); // 输出：hello async
});

// 箭头函数形式的async函数
const getNum = async () => {
  return 123;
};

getNum().then(res => {
  console.log(res); // 输出：123
});

await表达式的使用规则

await关键字只能用在async函数内部，后面通常跟一个Promise对象，它会暂停当前async函数的执行，等待后面的Promise状态变为resolved后，再继续执行后面的代码，并且取到resolve的值作为await表达式的结果。如果后面不是Promise对象，会直接将该值作为await的结果。

// 模拟一个异步请求，返回Promise
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('请求到的数据');
    }, 1000);
  });
}

async function handleData() {
  console.log('开始请求');
  // 等待fetchData的Promise完成后，拿到结果赋值给data
  const data = await fetchData();
  console.log('请求结果：', data);
  console.log('请求结束');
}

handleData();
// 输出顺序：开始请求 -> 等待1秒 -> 请求结果：请求到的数据 -> 请求结束

错误处理方式

如果await后面的Promise状态变为rejected，那么整个async函数会抛出错误，我们可以使用try...catch语句来捕获这个错误，避免程序崩溃。也可以使用.catch()方法捕获async函数返回的Promise的错误。

// 模拟失败的异步请求
function fetchError() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('请求失败'));
    }, 1000);
  });
}

// 方式1：使用try...catch捕获错误
async function handleError1() {
  try {
    const res = await fetchError();
    console.log(res);
  } catch (err) {
    console.log('捕获到错误：', err.message); // 输出：捕获到错误：请求失败
  }
}

handleError1();

// 方式2：使用.catch()捕获
async function handleError2() {
  const res = await fetchError();
  console.log(res);
}

handleError2().catch(err => {
  console.log('捕获到错误：', err.message); // 输出：捕获到错误：请求失败
});

注意事项

• await会阻塞当前async函数的执行，但不会阻塞主线程的其他代码，因为它是基于Promise的微任务实现的。
• 如果不需要等待多个异步操作的结果，不要按顺序写多个await，会导致执行时间变长，这种情况可以使用Promise.all来并行处理。
• await只能在async函数中使用，普通函数里使用会直接抛出语法错误。

// 并行处理多个异步请求
function request1() {
  return new Promise(resolve => {
    setTimeout(() => resolve('结果1'), 1000);
  });
}

function request2() {
  return new Promise(resolve => {
    setTimeout(() => resolve('结果2'), 1000);
  });
}

async function parallelRequest() {
  console.log('开始并行请求');
  // 同时发起两个请求，等待所有请求完成
  const [res1, res2] = await Promise.all([request1(), request2()]);
  console.log(res1, res2); // 等待1秒后同时输出：结果1 结果2
}

parallelRequest();

async_awaitJavaScript异步编程Promise修改时间：2026-06-05 02:07:09