从 "渣男" 到 "深情男":Promise 如何让 JS 变得代码变得专一又靠谱

一、JS 曾经是个 "渣男"?

上回咱们聊到 JS 是个 "渣男"------ 同一时间只对一个任务 "深情",但遇到耗时任务就会把它 "挂起"。就像你约男神吃饭,他却说 "等我打完这局游戏",结果你等了半小时还没动静(这就是setTimeout的日常)。

看看这段代码,感受下 "渣男" 的敷衍:

js 复制代码
let a = 1

setTimeout(() => {

 a = 2  // 1秒后才会执行

}, 1000)

console.log(a);  // 立马输出1,根本不等后面的操作

这就像你问男神 "爱我吗",他嘴上说 "爱"(输出 1),心里却想着别人(后面才改 a=2),简直渣得明明白白!

二、回调地狱:深情错付的连环套

后来 JS 想做个 "深情男",想认真处理异步任务,结果用力过猛 ------ 搞出了 "回调地狱" 这种奇葩操作。就像为了证明爱意,承诺 "先约会、再告白、再求婚",结果写成了绕口令:

js 复制代码
function foo() {

 setTimeout(() => {

   a = 2

   console.log('第一次约会', a);

   bar()  // 约会完才能告白

 }, 1000)

}

function bar() {

 setTimeout(() => {

   a = 3

   console.log('深情告白', a);

   baz()  // 告白完才能求婚

 }, 2000)

}

function baz() {

 console.log('准备求婚', a);

}

foo()

这代码嵌套得比俄罗斯套娃还离谱,就像男神说 "等我妈同意了,我就跟你说我爸的意见,然后我们再问我奶奶...",听着就头大!

三、Promise:让 JS 变成 "深情专一男"

Promise 横空出世后,JS 终于学会了 "一心一意"------ 该等的绝不敷衍,该做的一步不落。它就像给感情加了个 "承诺协议",明确了三个阶段:

  • pending(等待中):刚加微信,还没确定关系

  • fulfilled(成功):确认关系,准备下一步

  • rejected(失败):不好意思,我们不合适

看看 Promise 版的 "爱情承诺":

js 复制代码
function xq() {  // 相亲

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

   setTimeout(() => {

     console.log('相亲成功');

     // 这里故意写反了,模拟"口是心非"的情况

     reject('其实没相中')  // 说好的成功,结果拒了?

   }, 3000)

 })

}

function marry() {  // 结婚

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

   setTimeout(() => {

     console.log('结婚了');

     reject('婚后不愉快')  // 又是一个"渣男"操作

   }, 2000)

 })

}

虽然例子里都是 "渣男行为",但 Promise 的机制保证了:该走的流程一步不少,该给的结果绝不拖欠

四、链式调用:深情要一步一步来

Promise 最迷人的地方,就是用then实现的 "链式调用"------ 像剥洋葱一样,一层一层推进关系,绝不跳步:

js 复制代码
xq()

.then(() => { 

 console.log('相亲成功,准备结婚');

 return marry()  // 上一步成了,才会走到这步

})

.then(() => {

 console.log('结婚成功,准备生娃');

 baby()

})

.catch((err) => {

 console.log('感情破裂原因:', err);  // 任何一步失败,都能及时止损

})

这段代码就像一份 "恋爱计划书":

  1. 先相亲(3 秒后)

  2. 相亲成了才结婚(再等 2 秒)

  3. 结婚成了才生娃

  4. 任何一步黄了,立马知道原因

对比之前的回调地狱,就像把 "我妈同意了就找你爸然后问奶奶..." 改成了 "第一步:见家长;第二步:谈婚论嫁;第三步:办婚礼"------ 清爽!

五、Promise 的 "深情秘籍"

其实 Promise 的源码核心很简单,就像男人的 "深情人设" 本质:说到做到,有始有终

js 复制代码
class Promise {

 constructor(fn) {

   function resolve() {  // 成功时调用

     // 执行后续操作

   }

   function reject() {  // 失败时调用

     // 处理错误情况

   }

   fn(resolve, reject)  // 一开始就许下承诺

 }

}

不管遇到什么情况,resolvereject总会给个说法,绝不玩消失 ------ 这才是 "深情男" 的基本素养!

六、最后说句大实话

从回调地狱到 Promise,就像从 "渣男" 到 "深情男" 的进化史。不是说 Promise 完美无缺,但它让异步代码有了 "契约精神":

  • 该等的,绝不提前跑路

  • 该做的,一步一步推进

  • 做错了,敢于直面错误(catch的作用)

下次写异步代码时,不妨想想 "深情男" 的准则 ------ 用 Promise 给代码一份承诺,既让阅读者舒心,也让维护者省心。毕竟,靠谱的代码和靠谱的人一样,都值得被偏爱~

相关推荐
用户952081611793 分钟前
百度地图MapVThree Editor:地图编辑
前端
程序员龙语21 分钟前
CSS 文本样式与阴影属性
前端·css
LYFlied30 分钟前
【每日算法】LeetCode 152. 乘积最大子数组(动态规划)
前端·算法·leetcode·动态规划
狼与自由35 分钟前
excel 导入 科学计数法问题处理
java·前端·excel
TAEHENGV35 分钟前
导入导出模块 Cordova 与 OpenHarmony 混合开发实战
android·javascript·数据库
小徐_233337 分钟前
不如摸鱼去的 2025 年终总结,今年的关键词是直面天命
前端·年终总结
GISer_Jing40 分钟前
交互式圣诞树粒子效果:手势控制+图片上传
前端·javascript
3824278271 小时前
CSS 选择器(CSS Selectors) 的完整规则汇总
前端·css
放逐者-保持本心,方可放逐1 小时前
PDFObject 在 Vue 项目中的应用实例详解
前端·javascript·vue.js
龙仔CLL1 小时前
vue2项目使用zoom解决pc端浏览器百分比缩放,布局样式不兼容问题
vue.js·html·zoom