从 "渣男" 到 "深情男":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 给代码一份承诺,既让阅读者舒心,也让维护者省心。毕竟,靠谱的代码和靠谱的人一样,都值得被偏爱~

相关推荐
kyriewen5 小时前
Anthropic 估值逼近万亿美元,Claude Sonnet 5 + Claude Science 一天两连发
前端·ai编程·claude
小徐_23336 小时前
Wot UI 2.2.0 发布:Button 新增 subtle,VideoPreview 预览体验继续增强
前端·微信小程序·uni-app
山河木马7 小时前
矩阵专题3-怎么创建投影矩阵(uProjectionMatrix)
javascript·webgl·计算机图形学
天蓝色的鱼鱼8 小时前
关于 CSS 你可能不知道的属性,但关键时刻很有用
前端·css
泯泷9 小时前
第 2 篇:设计第一套字节码:Opcode、Instruction 与 Constant Pool
前端·javascript·安全
妙码生花9 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(十五):优化细节、网络请求封装
前端·后端·ai编程
泯泷9 小时前
第 1 篇:从 1 + 2 开始:亲手写出第一台 JSVM
前端·javascript·安全
团团崽_七分甜9 小时前
Spring Boot 核心知识点总结
前端
lichenyang4539 小时前
从一个按钮开始,理解 ASCF 框架到底在做什么
前端