javaScript 进阶之路 --- 《手写 Promise(前篇)》(二)

简介: javaScript 进阶之路 --- 《手写 Promise(前篇)》

五. MyPromise 的三种状态


等等,我们好像忘了一个很关键的东西,Promise 的三种状态!!!还记得吗?Promise 在初始化的时候是有三个状态的,分别是 pendingfulfilledrejected。这三种状态分别影响着 then 函数中我们取到的值。

知道这一点,我们马上就应该想到,我需要再定义一个变量,来存放这三个状态值。

image.png

并且还有一点,pending 状态是会在初始化,也就是还没调用 resolve 或者 reject 函数之前的状态。

所以我们就需要在 constructor 构造函数调用 executor 之前将 state 的状态信息改为 pending,对应就是下面这行代码的意义。

image.png

并且我们可以推算出,在 resolve 函数内,和 reject 函数内需要分别修改状态值为 fulfilledrejected,就如同下面的写法一样。

image.png

由于我们 then 函数会根据状态去做相应传递的参数不同,所以理所当然的需要修改为下面的写法。

image.png

下面应该是你目前的代码。

image.png

六. 创造一个 MyPromise 实例


目前看起来好像我们的逻辑非常严谨对吧,我们别着急往下写,我们自己去调用一下看看是什么样子。我们先自己 new MyPromise 生成一个实例看看。

image.png

按照我们的推算,控制台应该会出入一个字符串韩振方

我们看一下结果:

fe4c064bc6694704ad7784eb9dca6df1_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.jpg

  1. 什么情况?竟然报错了?别着急,我们分析一下错误。
Uncaught TypeError: Cannot set properties of undefined (setting '#result')

这里给出的错误信息是,我们不能给 undefined 设置 #result 的属性。

怎么回事啊?我们怎么在给 undefined 设置属性?我们不是在给 MyPromise 实例设置属性吗?我还就不信了,我非得打印一下看看,我们在 resolve 里面打印一下 this看看到底这个 this 是谁 。

image.png

看一下控制台:

image.png

emm...好像还真是 undefined

到底怎么回事呢?🤔 其关键点在于下面这段代码。

image.png

在这里我们看似在引用实例自身去调用 resolve,实际上在这里调用者的其实是 window 对象。不过因为我们在 Class 类里面是默认开启严格模式的,如果丢失了 this ,并不会将 this 默认指向全局对象window

image.png

所以我们需要干一件非常非常重要的事情,没错,就是绑定 this

image.png

因为我们 constructor 函数里的 this 总是会指向实例本身,所以我们需要在 调用resolve 函数和 reject 函数之前,需要在 excutor 的参数提前绑定好 this 才可以。所以我们现在的代码应该是这个样子:

image.png

让我们再次调用一下我们自己的 MyPromise ,来看一下现在能不能成功读取我们保存的数据。

image.png

5411b7a1cef04a1d97d29b3ae997bfd2_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.jpg

可以看到,我们已经成功读取了我们通过then方法读取到了 resolve 传递过来的数据。

到这里你可能好奇,为什么 then 方法不用绑定 this。因为你别忘了我们的 then 是怎么去调用的。

image.png

可以看到,我们的 then 是通过对象一个属性名去调用的,那么它的 this 百分百就是 data 实例对象。它是不需要我们考虑 this 指向问题的。

总结


在本文主要引导大家构造好一个 Promise 的骨架,大家可以先消化一下,在下一篇内容我会更深入的讲解其中的细节。🎁


相关文章
|
12天前
|
前端开发 JavaScript
用JavaScript 实现一个简单的 Promise 并打印结果
用 JavaScript 实现一个简单的 Promise 并打印结果
|
12天前
|
JSON 前端开发 JavaScript
在 JavaScript 中,如何使用 Promise 处理异步操作?
通过以上方式,可以使用Promise来有效地处理各种异步操作,使异步代码更加清晰、易读和易于维护,避免了回调地狱的问题,提高了代码的质量和可维护性。
|
17天前
|
JSON 前端开发 JavaScript
浅谈JavaScript中的Promise、Async和Await
【10月更文挑战第30天】Promise、Async和Await是JavaScript中强大的异步编程工具,它们各自具有独特的优势和适用场景,开发者可以根据具体的项目需求和代码风格选择合适的方式来处理异步操作,从而编写出更加高效、可读和易于维护的JavaScript代码。
22 1
|
1月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:深入了解 Promise 和 async/await
【10月更文挑战第8天】JavaScript 中的异步编程:深入了解 Promise 和 async/await
|
1月前
|
前端开发 JavaScript 小程序
JavaScript的ES6中Promise的使用以及个人理解
JavaScript的ES6中Promise的使用以及个人理解
18 1
|
2月前
|
前端开发 JavaScript
JavaScript中的Promise:简化异步编程
JavaScript中的Promise:简化异步编程
|
2月前
|
Web App开发 前端开发 JavaScript
js之 Promise | 12-8
js之 Promise | 12-8
|
1月前
|
前端开发 JavaScript UED
深入了解JavaScript异步编程:回调、Promise与async/await
【10月更文挑战第11天】深入了解JavaScript异步编程:回调、Promise与async/await
15 0
|
2月前
|
前端开发 JavaScript
ES6新标准下JS异步编程Promise解读
ES6新标准下JS异步编程Promise解读
36 3
|
1月前
|
前端开发 JavaScript 开发者
深入理解JavaScript中的Promise:用法与最佳实践
【10月更文挑战第8天】深入理解JavaScript中的Promise:用法与最佳实践
58 0
下一篇
无影云桌面