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

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

image.png

手写 Promise


前言: 该来的还是来了,经过完成我们前面的四个支线任务

终于到了我们的主线任务 ---《手写 Promise》。对于前端来讲,当你完全理解 Promise 的设计思路,那么你会对你之前所了解的 JS 世界,有一个全新的认知。

不知各位是否有过下面这样的想法:

--“我感觉我现在知识储备差不多了,接下来如何进阶呢?”

其实这个问题谁都无法告诉你准确答案。只有当你在某一天掌握了你之前不知道的知识点,并且完全领悟它的时候。你脑子里就会突然有种 “知识升华” 的感觉。(我也无法准确描述那种感觉,就好像突然悟了一样)脑子里会瞬间把之前所有知识串联起来,各个知识点不再是一个一个的碎片🧩。

这种感觉就是在我某一天读懂 JS 回调函数真正想表达出的思想,并且手写出 Promise 涌现的。当你某天有过一次这样感觉后,你就不会再去问别人关于如何进阶这种问题了,因为那时候的你,其实已经完成了当前知识的进阶,当你回过头看之前的代码时,你会发现不一样的世界,是那种拨云见日的感觉。

⚠️注意:本文的内容需要你对回调函数和宏任务微任务有比较清晰的认识,请不太懂的小伙伴在家长的陪同下认真观看

一. 文件准备


本文需要你准备的文件非常简单,随便在你的目录文件夹下创建一个 myPromise.ts 文件,对 .ts 不太熟悉的小伙伴不需要担心,本篇用到 ts 的相关内容很少。

image.png

二. 实现 MyPromise类 的构造器函数


首先我们定义一个叫做 MyPromise 的类。在接下来我会顺着原生的 Promise 一步一步帮你去理解 Promise 的实现思想。

image.png

在上一章内容我们了解了,Promise 类会接收一个叫做 executor 的函数来初始化我们的 Promise 类的实例。

image.png

ok,并且我们还特别强调了,executor 就是一个普普通通的函数而已。那么我们就可以像下面这样,在 MyPromiseconstructor 函数内定义一个形参,来准备接收在初始化时传递给我们的实参数。

image.png

我相信聪明的你一定可以看出来,我们其实在 new 一个 Promise 实例的时候,传递给 Promise 类的函数就是我们刚刚定义的这个 executor 函数的实参。

image.png

OK,我们继续。我们还知道 executor 函数会被传递两个参数。这两个参数分别是一个叫做 resolvereject 的函数!注意,它们两个是函数!!所以我们就可以像下面这样写。

image.png

好像飘红了?是的,因为在 MyPromise 结构体内,还没有这两个函数。那怎么办呢?🤔,这还不简单?没有我们就自己造呗~

可以看到我们自己定义了两个函数,好像还是飘红...

image.png

这里就需要用到 this 关键词,来告诉 executor 我要传递的是类本身的方法。所以正确的方法应该下面这样。

image.png

至此,我们的 executor 函数就已经写好了。

三. 实现 resolve,reject 函数


这里我们先实现 resolve ,别着急。我们先看原生 Promise 是怎么使用的。

image.png

我们可以得知,resolve 函数可以被传递一个参数,所以我们可以更进一步得出。

image.png

我们先来测试一下我们的思路是不是对的。我们先 new 一个实例保存一个数据看看。

image.png

image.png

嗯...看来有点那味道了。🍦

同理 reject 函数也是这种写法。到这一步,我想你的 MyPromise 类应该长这个样子。

image.png

四.实现 then 方法


我们先回忆一下,原生的 Promise 读取数据的时候,是在实例的 then 方法上读取的。这里我们就需要提供一个变量去接收 resolve 传递的值。并且需要在 MyPromise 类中提供一个 then 方法,去读取传递过来的数据。

image.png

这里先停一下,我们想一想。我们的 result 是不希望被实例引用的。什么意思呢?如果我们按照上面的写法,是会引发这样的错误的。

image.png

实例竟然可以直接去引用这个 result ,这是我们不希望看到的。

image.png

这里需要用到的知识是:假如我们不希望实例调用某个属性,方法也很简单,只需要在前面加上一个 #号即可。

image.png

接下来是本文的第一个重点。then 函数该怎么设计?我们先看原生Promise 实例的身上 .then 方法是怎么使用的。

image.png

由之前的知识我们可以知道,then 方法也是接受两个回调函数作为参数的。并且第一个回调函数的参数会被传递 resolve 保存的值,第二个回调函数的参数会被传递 reject 保存的值。

ok,那我们先不考虑那么多,直接先给 then 函数传两个参数,这两个参数也是两个函数。第一个参数我们就起一个叫 onFulfilled的函数 ,它对应着 resolve 保存的值。第二个参数我们就叫 onRejected 吧,它也应该是一个函数。于是我们就可以补充 then 函数的内容,它会被传递我们通过 reject 保存的那个结果。

image.png

下面的代码应该是你目前写出来的样子。

image.png

相关文章
|
15天前
|
前端开发 JavaScript
用JavaScript 实现一个简单的 Promise 并打印结果
用 JavaScript 实现一个简单的 Promise 并打印结果
|
15天前
|
JSON 前端开发 JavaScript
在 JavaScript 中,如何使用 Promise 处理异步操作?
通过以上方式,可以使用Promise来有效地处理各种异步操作,使异步代码更加清晰、易读和易于维护,避免了回调地狱的问题,提高了代码的质量和可维护性。
|
20天前
|
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
19 0
|
2月前
|
前端开发 JavaScript
ES6新标准下JS异步编程Promise解读
ES6新标准下JS异步编程Promise解读
36 3
|
2月前
|
前端开发 JavaScript
JavaScript Promise-2
JavaScript Promise-2
27 3
下一篇
无影云桌面