好多刚学 JavaScript 的朋友，一写异步代码就头大：要么回调函数嵌套了三四层，代码像 “金字塔” 一样越写越乱；要么用了 Promise 却没处理错误，一遇到网络波动就报红；还有人明明写了 await，结果代码还是同步执行，数据拿不到 —— 你是不是也踩过这种 “异步调不通” 的坑？

小索奇之前帮朋友调一个用户登录功能的代码时，就见过典型的 “回调地狱”：他要实现 “登录成功后获取用户信息，再根据用户信息获取订单列表”，结果写了三层嵌套的回调，里面的 if-else 跟绕迷宫似的，我光看懂逻辑就花了 5 分钟。更麻烦的是，中间某一步出错了，根本没法定位问题在哪 —— 你想想看，要是代码里全是嵌套的 function，调试的时候连断点都不好打，能不崩溃吗？

今天就跟你掰扯掰扯 JS 异步代码的几个高频坑，都是小索奇和前端同事日常开发中踩过的，搞懂这些，你写异步代码能少走 90% 的弯路，再也不用对着 “未定义” 的数据抓头发。

第一个坑就是 “回调地狱”（Callback Hell），这是新手最容易掉的坑。简单说就是多个异步操作嵌套在一起，比如 “先请求 A 接口，拿到 A 的结果再请求 B 接口，拿到 B 的结果再请求 C 接口”，结果写成一层套一层的回调函数，代码缩进越来越多，可读性差到离谱。

举个例子，之前朋友写的登录逻辑，大概是这样的：

login (username, password, function (loginRes) {

if (loginRes.success) {

getUserInfo (loginRes.token, function (infoRes) {

if (infoRes.success) {

getOrderList (infoRes.userId, function (orderRes) {

if (orderRes.success) {

// 渲染订单列表

} else {

// 处理订单请求错误

}

})

} else {

// 处理用户信息请求错误

}

})

} else {

// 处理登录错误

}

})

是不是很眼熟？这种代码不仅看着乱，要是后期想加一步 “获取用户地址”，就得再嵌套一层，维护起来简直是灾难。

小索奇一般会用 Promise 把回调改成链式调用，先把每个异步函数封装成 Promise：

function loginPromise (username, password) {

return new Promise ((resolve, reject) => {

login (username, password, (res) => {

res.success ? resolve (res) : reject (res.error)

})

})

}

// 同理封装 getUserInfoPromise 和 getOrderListPromise

然后用 then 链式调用，代码一下就扁平了：

loginPromise (username, password)

.then (loginRes => getUserInfoPromise (loginRes.token))

.then (infoRes => getOrderListPromise (infoRes.userId))

.then (orderRes => { /* 渲染订单列表 / })

.catch(error => { / 统一处理所有错误 */ })

这样不管加多少步异步操作，都是往后加 then，逻辑清晰，错误也能在 catch 里统一处理，比嵌套回调舒服多了。

第二个坑是用了 Promise 却 “忽略错误处理”，只写 then 不写 catch，结果出了错找不到原因。好多人觉得 “我的接口肯定没问题”，或者忘了加 catch，结果上线后遇到网络超时、接口返回错误，页面直接卡住，控制台报错都不知道在哪改。

小索奇之前遇到过一个情况：同事写了个获取商品数据的代码，用了 Promise 但没加 catch，测试的时候网络好好的没问题，上线后有用户反馈 “商品列表刷不出来”，查了半天日志才发现，有个地区的 CDN 出了问题，接口返回 404，因为没 catch 错误，代码卡在获取数据那步，连错误提示都没法给用户 —— 你看，少个 catch，用户体验直接拉胯。

其实 Promise 的错误处理特别简单，要么在链式调用最后加个 catch，要么在 then 里加第二个参数（错误回调）。小索奇建议用 catch 统一处理，因为不管前面哪个 then 里出了错，都会传到最后一个 catch 里，不用每个 then 都写错误处理，省事还不容易漏。

第三个坑是 async/await 用错，把 “异步代码写成同步执行”，导致效率变低。好多人学会了 async/await，觉得比 Promise 更简单，就不管三七二十一全用 await，但没注意 “哪些操作可以并行”，结果本来能同时执行的请求，变成了串行，速度慢了一倍。

比如要获取 “商品列表” 和 “用户购物车” 这两个无关的数据，它们不需要互相等结果，本来可以同时请求，但有人写成这样：

async function getHomeData () {

const goodsRes = await getGoodsList () // 花 2 秒

const cartRes = await getCartList () // 又花 2 秒

return { goodsRes, cartRes }

}

这样总共要花 4 秒，因为第二个 await 要等第一个请求完才执行。但实际上，这两个请求可以同时发，用 Promise.all 就能搞定：

async function getHomeData () {

const [goodsRes, cartRes] = await Promise.all ([

getGoodsList (),

getCartList ()

])

return { goodsRes, cartRes }

}

这样两个请求同时执行，总共只要 2 秒，效率直接翻倍。小索奇每次写多个无关的异步请求时，都会用 Promise.all，除非真的需要按顺序执行，不然绝不浪费时间在串行上。

还有个小细节要提醒你：await 只能用在 async 函数里，别在普通函数里写 await，不然会报错。之前有人在全局作用域里直接写 await getGoodsList ()，结果控制台报 “Unexpected reserved word 'await'”，查了半天才知道忘了包 async 函数 —— 你记着，async 和 await 是 “绑定” 的，有 await 就得有 async，没商量。

其实 JS 异步没那么难，关键是避开 “回调嵌套”“忽略错误”“滥用 await” 这几个坑，先用 Promise 理清逻辑，再用 async/await 简化代码，慢慢就能熟练。小索奇建议新手刚开始写异步代码时，先把每个步骤拆成单独的 Promise 函数，再用链式调用或 async/await 组合，别着急写复杂逻辑，一步一步来。

你下次写异步代码时，要是再遇到 “数据拿不到”“代码卡住” 的情况，就对照这几个坑排查，说不定很快就能找到问题。要是还拿不准，也可以跟小索奇聊聊，咱们一起分析代码。

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