现在我们知道,这个改造的 addUserAge1
函数会返回一个 Promise 实例。
我们先看一下这个实例身上到底是什么样子的。
我们这里我们关键先看这两个属性,我们的结果好像被保存到了一个叫 [[PromiseResult]] 的属性中。还有一个属性叫做 [[PromiseSate]]
三. Promise 的三个状态
1.这里我们先说明, [[PromiseSate]] 有三种状态 pendding
,fulfilled
和 rejected
。分别对应着数“据存放之前”,“数据存放成功”,“和数据存放失败”三种情况。
“数据存放之前”是指你还没通过 resolve
或者 reject
去存放数据的时候。
“数据存放成功”就是上面我们刚刚调用 resolve
的结果,这里不再重复。
“和数据存放失败”就是我们调用 reject
函数保存的数据。
那既然我已经看到了放在 [[PromiseResult]] 的结果,我该怎么去取呢?非常简单。
Promise 实例身上为我们提供了一个 then
方法。并且会把 [[PromiseResult]] 存放的值,传递给 then
方法的第一个回调函数的参数里。
我们看一下结果:
如果读过我之前文章的小伙伴,这种写法不知道你还熟悉吗?
如果这个能看懂,我相信你读懂后面的 《手写Promise》 一定没问题!!🎁
如果是 reject
保存的数据,那么他会被传递给 then
方法的第二个回调函数的参数中。
ok,我们休息一下,不再讲 cath 等这些方法了,让我们慢慢消化一下。
四. 回到最初的问题
现在我们大致了解了 Promise 的基本原理。我们之前说过,“回调地狱” 的产生是因为我需要多次请求后端的数据,多次嵌套调用了回调函数,才产生了 金字塔 一样的代码结构。那我们的 Promise 是怎么就避免了这个呢?
下面的内容我们先忽略 reject
,我们只要搞懂 resolve
,reject
我相信你会同样会马上理清楚。
现在还是老问题,我下面的页面需要依靠 age1 继续 +1 才能得到正确的样式,我们先来看结论。
看一下结果:
你发现了什么吗?
- 我在这里
return
了另一个 Promise 实例,然后我就可以接着then
下去。
这里直接引出:then 方法的返回值会被当重新包装成 Promise 实例,完成“链式调用”
- 聪明的你就可以猜到,我们接下来如果多次
age+1
的话。我就一直重复then--> return --> then --> return
就行了。
- 可以看出上面的代码写法,并没有出现一直向右倾斜的情况,要比之前代码的可读性强非常多的。这其实就是 Promise 帮我们完成的事情。
结语:
其实 Promise 相关还有非常多的知识,如 catch
,finally
等这些, 我单独一章讲完等话,害怕有的读者会消化不了。所以就把核心的概念先抛出来,如果你顺利的读懂里本文,那剩下没讲到的那些方法,我希望你可以自行去了解,我只能做一个引路人把核心概念给你捋清楚,打渔还需你自己。
如果有的小伙伴感觉没太读懂,我还是希望你能回过头把这两篇文章读熟,读透,再返过来读本篇文章。
如果你跟进了后续的《手写 Promise》,我相信你会看到一个不一样的 JS 世界。🎁~