JavaScript async/await 实战秘籍 异步编程技巧 + 避坑指南 秒杀 Promise then 链

你是不是用 Promise 的 then 链时还觉得不够爽？比如写了五六个 then 之后，逻辑线还是得顺着链条捋；或者想在异步操作里加个条件判断，结果得把判断塞在 then 里面，看着特别别扭？

别纠结了！今天给你盘 JS 里的 “异步语法糖”——async/await，小索奇第一次用它替换 then 链时，简直像把键盘换成了机械轴，敲击手感都变顺了！

简单说就是，async/await 能让你用 “同步代码的写法” 去跑异步操作，不用再跟 then 链条打交道。说白了，Promise 解决了 “回调地狱”，而 async/await 解决了 “then 链的繁琐”，把异步逻辑写得跟顺序执行的代码一模一样。

给你看个直观对比，之前用 Promise 写的多步请求是这样的：

// Promise 的 then 链

getUserInfo (1)

.then (user => getOrderList (user.id))

.then (orders => getProductDetail (orders [0].productId))

.then (product => {

if (product.stock > 0) {

return reserveProduct (product.id);

} else {

throw new Error (' 缺货了 ');

}

})

.then (reserve => console.log (' 预约成功 ', reserve))

.catch (err => console.error (err));

换成 async/await，直接变身 “平铺直叙”：

//async/await 写法

async function reserveProductFlow () {

try {

const user = await getUserInfo (1); // 等用户信息返回

const orders = await getOrderList (user.id); // 等订单列表返回

const product = await getProductDetail (orders [0].productId); // 等商品详情返回

if (product.stock> 0) {

const reserve = await reserveProduct (product.id); // 条件满足再预约

console.log (' 预约成功 ', reserve);

} else {

throw new Error (' 缺货了 ');

}

} catch (err) {

console.error (err); // 所有错误放这统一处理

}

}

是不是像读故事一样清晰？这里的 async 必须加在函数前面，告诉 JS “这函数里有异步操作”；await 则是 “等一下，直到这个异步操作有结果了再往下走”。

这背后的原因是啥呢？其实 async/await 就是 Promise 的 “语法糖”，它没有创造新的异步机制，只是把 Promise 的 then 调用变成了编译器层面的自动处理。你写的 await getUserInfo ()，本质上还是在调用 Promise 的 then 方法，只是不用你手动写了而已。

说到这儿可能有人会问：“那 await 是不是会阻塞整个代码？” 当然不会！小索奇专门做过测试，await 只会 “暂停当前 async 函数的执行”，不会卡住主线程。比如你在 await 请求的时候，浏览器该渲染页面还渲染，该处理点击事件还处理，完全不影响其他操作。

但这有个前提：await 必须在 async 函数里用！要是你在普通函数里写 await，浏览器直接报错，这个坑我当年踩过，调试了十分钟才反应过来，你是不是也中过招？

再给你说个超实用的技巧：多个独立的异步请求别挨个 await！比如你要同时拿用户信息和商品分类，这俩请求互不依赖，要是这么写就太浪费时间了：

// 错误示范：串行执行，总共花 2 秒

const user = await getUserInfo (1); // 1 秒

const category = await getCategoryList (); // 1 秒

这俩请求本来可以同时跑，结果你让它们排队，平白多等 1 秒。正确的写法是用 Promise.all 配合 await：

// 正确示范：并行执行，总共花 1 秒

const [user, category] = await Promise.all ([

getUserInfo (1),

getCategoryList ()

]);

这样两个请求同时发起，哪个先好等哪个，最后一起返回结果，效率直接翻倍！这个技巧在处理多接口请求的页面时，能明显提升加载速度。

还有个容易被忽略的点：async 函数的返回值默认是 Promise。哪怕你 return 一个普通值，比如 async function fn () { return 1;}，调用 fn () 得到的也是 Promise.resolve (1)。所以要是你想在另一个 async 函数里用它的结果，还得加 await，这点一定要记牢。

你平时写多步异步逻辑的时候，是喜欢 then 链还是 async/await？评论区说说你觉得 async/await 最香的场景，或者踩过的奇葩坑！

前面忘了提一句，async/await 虽然好用，但也不是万能的。比如处理流式数据（像文件上传进度），还是得用 Promise 的 then 或者回调函数，因为流式数据是分批返回的，await 只能等全部结束才拿结果。

我是【即兴小索奇】，点击关注，后台回复 领取，获取更多相关资源