JavaScript 异步编程指南：async/await 与 Promise 该怎么选？
在 JavaScript 开发中，异步操作就像家常便饭 —— 从调用后端 API 到读取本地文件，几乎无处不在。但很多开发者都会困惑：到底该用 Promise 的链式调用，还是 async/await 语法？其实答案很简单：没有绝对的好坏，只有场景的适配。 今天我们就用实际案例聊聊，这两种异步写法各自适合什么场景，以及如何在项目中混搭使用，让代码既高效又易读。 先搞懂：两者不是对立关系 很多人以为 async/await 是 Promise 的替代品，其实大错特错。async/await 本质是 Promise 的语法糖，它的底层依然是 Promise 实现。就像用for...of遍历数组比forEach更直观一样，async/await 让异步代码看起来更像同步代码。 先看个最简单的对比： // 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 获取用户信息，最后用用户信息加载权限配置： // 用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 的优势更明显。比如： 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 的写法更直观： 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.all、Promise.race）更适合，甚至不可替代。 1. 并行执行多个异步操作 当多个异步任务互不依赖时，用Promise.all并行执行能大幅提高效率。比如同时加载列表数据和筛选条件： async function loadDashboard() { // 两个请求并行执行，总耗时是较慢那个的时间 const [products, categories] = await Promise.all([ fetchProducts(), fetchCategories() ]); renderProducts(products); renderFilters(categories); } 如果用await逐个调用，会变成串行执行（总耗时是两者之和），完全没必要： // 不推荐：串行执行，浪费时间 const products = await fetchProducts(); const categories = await fetchCategories(); // 等第一个完成才开始 2. 需要超时控制的异步操作 Promise.race可以实现 “谁先完成就用谁的结果”，非常适合超时控制。比如 “3 秒内没返回就显示加载失败”： // 封装一个带超时的异步函数 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是最佳选择： 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 更高效。 混搭使用：发挥各自优势 实际开发中，两者往往结合使用效果最好。比如先并行获取基础数据，再串行处理后续逻辑： 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： // 错误：串行执行，慢！ 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： // 等待所有任务完成，无论成功失败 // 文件上传场景优化 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 串联。 说到底，选择的核心是可读性和效率—— 哪种写法让团队成员更容易理解，哪种方式能让程序跑得更快，就用哪种。技术没有绝对的好坏，适合场景的才是最好的。
