JavaScript 异步编程指南:async/await 与 Promise 该怎么选?

在 JavaScript 开发中,异步操作就像家常便饭 ------ 从调用后端 API 到读取本地文件,几乎无处不在。但很多开发者都会困惑:到底该用 Promise 的链式调用,还是 async/await 语法?其实答案很简单:没有绝对的好坏,只有场景的适配

今天我们就用实际案例聊聊,这两种异步写法各自适合什么场景,以及如何在项目中混搭使用,让代码既高效又易读。

先搞懂:两者不是对立关系

很多人以为 async/await 是 Promise 的替代品,其实大错特错。async/await 本质是 Promise 的语法糖 ,它的底层依然是 Promise 实现。就像用for...of遍历数组比forEach更直观一样,async/await 让异步代码看起来更像同步代码。

先看个最简单的对比:

JavaScript 复制代码
// Promise写法
fetchData().then(data => {
  return processData(data);
}).then(result => {
  console.log(result);
}).catch(err => {
  console.error(err);
});

// async/await写法
async function handleData() {
  try {
    const data = await fetchData();
    const result = await processData(data);
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

两者功能完全一致,但 async/await 的线性结构更符合人类的阅读习惯 ------ 这也是它被广泛采用的核心原因。

优先用 async/await 的 3 种场景

什么时候用 async/await 更合适?记住一个原则:当异步操作需要按顺序执行,或者逻辑中有较多条件判断时

1. 线性异步流程(一步接一步)

最典型的场景是依赖前一步结果的异步操作。比如先登录获取 token,再用 token 获取用户信息,最后用用户信息加载权限配置:

JavaScript 复制代码
// 用async/await,逻辑一目了然
async function initApp(username, password) {  // 补充参数定义,避免未定义变量
  try {
    const token = await login(username, password);
    const userInfo = await getUserInfo(token);  // 依赖token
    const permissions = await getPermissions(userInfo.role);  // 依赖userInfo
    renderApp(permissions);
  } catch (err) {
    showError(err);
  }
}

如果用 Promise 链式调用写,虽然能实现,但嵌套越深(比如再加两步),可读性会明显下降。

2. 包含条件判断的异步逻辑

当异步流程中需要根据结果做分支判断时,async/await 的优势更明显。比如:

JavaScript 复制代码
async function checkAndUpdate() {
  const currentVersion = await getCurrentVersion();
  
  // 同步的条件判断,自然融入异步流程
  if (currentVersion < '2.0') {
    const updateInfo = await fetchUpdateInfo();
    if (updateInfo && updateInfo.force) {  // 增加可选链,避免updateInfo为undefined时报错
      await showForceUpdateDialog();
    } else {
      await showOptionalUpdateToast();
    }
  }
}

这段代码用 Promise 写会嵌套多层then,而 async/await 让同步逻辑和异步操作无缝衔接,就像写同步代码一样自然。

3. 需要中断执行的场景

有时候我们需要在异步流程中提前返回(比如参数无效时),async/await 的写法更直观:

JavaScript 复制代码
async function submitForm(data) {
  // 同步校验
  if (!data?.email) {  // 增加可选链,避免data为null/undefined时报错
    showError('邮箱不能为空');
    return;  // 直接中断
  }
  
  // 异步操作
  try {
    const validateResult = await validateRemote(data);
    if (!validateResult.success) {
      showError(validateResult.message);
      return;  // 校验失败,中断
    }
    await submitData(data);
    showSuccess();
  } catch (err) {
    handleError(err);
  }
}

用 Promise 的话,需要在每个then里处理条件判断,代码会更零散。

优先用 Promise 的 3 种场景

虽然 async/await 很方便,但有些场景下,Promise 的原生 API(如Promise.allPromise.race)更适合,甚至不可替代。

1. 并行执行多个异步操作

当多个异步任务互不依赖 时,用Promise.all并行执行能大幅提高效率。比如同时加载列表数据和筛选条件:

JavaScript 复制代码
async function loadDashboard() {
  // 两个请求并行执行,总耗时是较慢那个的时间
  const [products, categories] = await Promise.all([
    fetchProducts(),
    fetchCategories()
  ]);
  
  renderProducts(products);
  renderFilters(categories);
}

如果用await逐个调用,会变成串行执行(总耗时是两者之和),完全没必要:

JavaScript 复制代码
// 不推荐:串行执行,浪费时间
const products = await fetchProducts();
const categories = await fetchCategories();  // 等第一个完成才开始

2. 需要超时控制的异步操作

Promise.race可以实现 "谁先完成就用谁的结果",非常适合超时控制。比如 "3 秒内没返回就显示加载失败":

JavaScript 复制代码
// 封装一个带超时的异步函数
function withTimeout(promise, timeoutMs = 3000) {
  let timer;  // 将timer提升到外部作用域
  const timeoutPromise = new Promise((_, reject) => {
    timer = setTimeout(() => {
      reject(new Error('请求超时'));
    }, timeoutMs);
  });
  return Promise.race([
    promise,
    timeoutPromise
  ]).finally(() => clearTimeout(timer));  // 确保始终清除定时器
}

// 使用
async function loadData() {
  try {
    const data = await withTimeout(fetchLargeData());
    render(data);
  } catch (err) {
    showError(err.message);  // 可能是超时错误
  }
}

这段代码用 async/await 无法实现,必须依赖 Promise 的race方法。

3. 处理动态数量的异步任务

当需要处理不确定数量的异步操作(比如批量上传多个文件),Promise.all是最佳选择:

JavaScript 复制代码
async function uploadFiles(files) {
  if (!files?.length) return;  // 增加空值判断,避免空数组或undefined时执行无效操作
  
  // 生成一个包含所有上传Promise的数组
  const uploadPromises = files.map(file => {
    return uploadFile(file);  // 每个文件的上传是异步操作
  });
  
  // 等待所有文件上传完成
  const results = await Promise.all(uploadPromises);
  
  // 处理结果
  const successCount = results.filter(r => r?.success).length;  // 增加可选链容错
  showMessage(`成功上传 ${successCount}/${files.length} 个文件`);
}

这种动态场景下,Promise 的数组处理能力比 async/await 更高效。

混搭使用:发挥各自优势

实际开发中,两者往往结合使用效果最好。比如先并行获取基础数据,再串行处理后续逻辑:

JavaScript 复制代码
async function buildReport() {
  // 第一步:并行获取不相关的数据(提高效率)
  const [users, orders, products] = await Promise.all([
    fetchUsers(),
    fetchOrders(),
    fetchProducts()
  ]);
  
  // 第二步:串行处理依赖关系的逻辑
  const userStats = await calculateUserStats(users);
  const orderSummary = await generateOrderSummary(orders, userStats);  // 依赖userStats
  const report = await compileReport(orderSummary, products);  // 依赖前两者
  
  return report;
}

这段代码先用Promise.all并行请求,节省时间;再用 async/await 处理有依赖的串行逻辑,兼顾效率和可读性。

避坑指南:这些错误别犯

  • 不要在循环中直接用 await

循环中用await会导致串行执行,如需并行,改用Promise.all

JavaScript 复制代码
// 错误:串行执行,慢!
for (const file of files) {
  await uploadFile(file);
}
// 正确:并行执行,快!
await Promise.all(files.map(file => uploadFile(file)));
  • 别忘了 try/catch

async/await 中任何await的 Promise reject 都会触发异常,必须用try/catch捕获,否则会导致程序崩溃。

  • 不要把 async 函数当同步函数用

async 函数永远返回 Promise,调用时必须用await.then处理,直接调用会拿到 Promise 对象而非结果。

  • 避免过度封装

简单的异步操作(比如单个请求)没必要包成 async 函数,直接返回 Promise 更简洁。

  • 注意 Promise.all 的失败快速失败特性

Promise.all中任何一个 Promise reject 都会立即触发整个 Promise reject,如需等待所有结果(无论成功失败),可使用Promise.allSettled

JavaScript 复制代码
// 等待所有任务完成,无论成功失败
// 文件上传场景优化
const results = await Promise.allSettled(uploadPromises);
const failedFiles = results
  .filter(r => r.status === 'rejected')
  .map((r, i) => ({ file: files[i].name, error: r.reason }));

总结:一句话记住用法

  • 用 async/await:处理线性依赖、包含条件判断、需要中断的异步流程;
  • 用 Promise API :处理并行任务(all)、超时控制(race)、动态异步数组;
  • 最佳实践 :两者结合,并行任务用Promise.all,后续逻辑用 async/await 串联。

说到底,选择的核心是可读性和效率------ 哪种写法让团队成员更容易理解,哪种方式能让程序跑得更快,就用哪种。技术没有绝对的好坏,适合场景的才是最好的。

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD4 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding4 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空4 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
小李飞飞砖6 小时前
React Native 组件间通信方式详解
javascript·react native·react.js