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

相关推荐
Healer9181 小时前
js请求的并发控制
前端
baozj1 小时前
告别截断与卡顿:我的前端PDF导出优化实践
前端·javascript·vue.js
杨超越luckly1 小时前
HTML应用指南:利用POST请求获取全国极氪门店位置信息
python·arcgis·html·数据可视化·门店数据
傲文博一1 小时前
为什么我的产品尽量不用「外置」动态链接库
前端·后端
Healer9181 小时前
Promise限制重复请求
前端
梵得儿SHI1 小时前
Vue 响应式原理深度解析:Vue2 vs Vue3 核心差异 + ref/reactive 实战指南
前端·javascript·vue.js·proxy·vue响应式系统原理·ref与reactive·vue响应式实践方案
chenyunjie1 小时前
我做了一个编辑国际化i18n json文件的命令行工具
前端
Emma歌小白1 小时前
移除视觉对象里“行的型号”造成的行级筛选,但不移除用户的 slicer 筛选
前端
玉宇夕落1 小时前
深入理解 JavaScript 中的 this:从设计缺陷到最佳实践(完整复习版)
javascript