JavaScriptAsyncAwait_JavaScript异步代码优化_技术教程

Async/Await通过async声明异步函数，await暂停执行直至Promise完成，使异步代码更同步化；支持try/catch错误处理，避免回调地狱，提升可读性与维护性。

异步编程是JavaScript中的核心概念之一，尤其在处理网络请求、文件操作或定时任务时尤为常见。传统的回调函数和Promise虽然能解决问题，但代码可读性和维护性较差。Async/Await的出现让异步代码看起来更像同步代码，极大提升了开发体验和代码质量。

Async/Await 基本语法

async关键字用于声明一个函数为异步函数，该函数会自动返回一个Promise。await只能在async函数内部使用，用于等待一个Promise对象的完成。

当执行遇到await时，函数会暂停执行，直到Promise被resolve或reject，然后继续向下执行。

使用async声明异步函数
用await等待Promise结果，无需链式调用.then()
错误可通过try/catch捕获，逻辑更清晰

示例：

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

简化Promise链式调用

多个连续异步操作时，Promise常导致“回调地狱”式的嵌套或过长的.then()链。Async/Await可将这些操作线性化，使流程一目了然。

避免深层嵌套，提升可读性
中间变量可直接赋值，便于调试
逻辑顺序与代码顺序一致

对比示例：

Promise写法：

fetch('/api/user')
  .then(res => res.json())
  .then(user => fetch(`/api/orders/${user.id}`))
  .then(res => res.json())
  .then(orders => console.log(orders));

Async/Await优化后：

async function getUserOrders() {
  const userRes = await fetch('/api/user');
  const user = await userRes.json();
  const orderRes = await fetch(`/api/orders/${user.id}`);
  const orders = await orderRes.json();
  console.log(orders);
}

并行执行优化性能

虽然await会让代码按顺序执行，但在不需要依赖前一个结果的情况下，可以结合Promise.all()实现并行调用，提升效率。

多个独立请求应同时发起
使用Promise.all()等待所有结果
避免不必要的串行等待

示例：

async function loadMultipleResources() {
  const [res1, res2, res3] = await Promise.all([
    fetch('/api/data1'),
    fetch('/api/data2'),
    fetch('/api/data3')
  ]);
  const [data1, data2, data3] = await Promise.all([
    res1.json(),
    res2.json(),
    res3.json()
  ]);
  return { data1, data2, data3 };
}

错误处理更直观

传统Promise需使用.catch()处理异常，而Async/Await支持使用try/catch，符合同步代码的异常处理习惯。

局部错误可在函数内捕获
可根据不同await语句做差异化处理
减少全局.catch()带来的不确定性

示例：

async function safeFetch() {
  try {
    const res = await fetch('/api/invalid');
    if (!res.ok) throw new Error(res.statusText);
    return await res.json();
  } catch (err) {
    console.log('请求出错：', err.message);
    return null;
  }
}

基本上就这些。Async/Await让JavaScript异步代码更简洁、易读、易维护，合理使用能显著提升项目质量。不复杂但容易忽略。