
Promise.then() 链式调用核心原理与实战避坑指南
说实话,Promise 这玩意儿我到现在有时候还会写错。不是不懂原理,就是那种'脑子会了手不会'的感觉。今天咱们不整那些虚的,就把这些年踩过的坑、流过的泪,统统掏出来给你看。
为什么 Promise 链容易让人困惑
刚入行那会儿被回调地狱支配的恐惧
我记得特别清楚,2018 年我刚入行第二个月,老大丢给我一个需求:先登录拿 token,然后用 token 换用户信息,再用用户信息查订单列表。听起来很简单对吧?我当时是这么写的:
// 警告:以下代码包含令人不适的内容,请谨慎观看
login(username, password, function(token) {
getUserInfo(token, function(userInfo) {
getOrderList(userInfo.userId, function(orders) {
renderOrders(orders, function() {
console.log('终于完了');
});
});
});
});
写完我还挺得意,觉得代码挺整齐的啊,都是向右缩进的。结果老大路过我工位,看了一眼屏幕,沉默了三秒,说:'你这代码,像楼梯,还是那种旋转楼梯。'
我当时没 get 到点,直到三天后需求变了,要在中间加一步校验用户状态。我盯着那个向右漂移了快半个屏幕的代码,陷入了深深的自我怀疑。这就是传说中的回调地狱(Callback Hell),也叫末日金字塔(Pyramid of Doom)。名字挺中二的,但痛苦是真实的。
后来我知道有 Promise 这玩意儿,兴冲冲地去看教程。MDN 文档、阮一峰的博客、各种掘金文章,看完我觉得自己都懂了——不就是个状态机嘛,pending、fulfilled、rejected,then 用来处理成功,catch 处理失败,finally 不管成败都会执行。简单!
然后我一写代码就废。
// 我以为的链式调用
fetchUser().then(user => fetchOrders(user.id)).then(orders => console.(orders));


