手写Promise(

Promise是用来解决回调地狱,一层又一层的反复嵌套问题,

先看Promise基本使用
在这里插入图片描述
在这里插入图片描述
那么可以看出,Promise,是一个函数或者一个类,然后用来实例化一个对象。
这里以函数讲解,

首先先了解一个大概思路,(简单版)

定义一个Promise(fun)函数,这个函数接受一个参数,而且这个参数是一个函数。
大概长这样 (resolve, reject)=>{//你的逻辑}
就是传进来一个函数,然后Promise内部定义了两个函数,分别是resolve,reject,然后把resolve,还有reject给这个函数,并且立即执行函数。
然后then的话,是放在原型链上的,即Promise.prototype.then,这样我们实力出来的对象也可通过.then来获取。then的话定义的也是一个函数,接受两个函数,用于处理成功还有失败的结果。
这就是大概思路。

接下来看具体实现:

大致结构
在这里插入图片描述
当我们实例化后这个传入的函数就会立即执行,如图
在这里插入图片描述
在这里插入图片描述

接着

只有当Promise是处于等待阶段时,才能改变状态。所以我们的resove,以及reject函数在定义的时候要判断是否是处于Pending状态,
在这里插入图片描述
这就是resolve,reject的实现

接着实现then

因为不管成功或者失败都会调用then函数,所以如图
在这里插入图片描述
只要判断当前状态是否是实现了resolve()或者reject()把状态变成FULFILLEN或者REJCT,然后再将this.value的值传进去调用函数即可。
基本功能已经实现,接下来看看效果
在这里插入图片描述
在这里插入图片描述

好像无效?

仔细一看,好家伙,原来我用成箭头函数了,怪不得this.state为undefined,而且,typeof的值是一字符串,应该这样才对
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
运行正常。

!!但是,还有一个问题

如图在这里插入图片描述
当我们用上setTimeout后,在这里插入图片描述
不管过了多久,都不会打印 ‘我是resolve’,这就有问题了。在这里插入图片描述
试了一下,此时在这里插入图片描述
还是pending,是因为setTimeout是异步的,所以当我们执行完a.then后,setTimeout里面的才会执行。
我们可以试试
在这里插入图片描述

在这里插入图片描述
果然打印出来了,证明我们的推论是没错了,现在就剩解决这个问题了。
发布者订阅模式,先存起来,要的时候再调用。
很简单,就是我们then的时候判断,如果为pending,就是表示此时是异步的,resolve或者reject还没执行呢,那么我们就将函数放到一个数组里面去。放进去然后在哪里调用呢,就在resolve或者reject函数调用,因为我们是三秒后才执行resolve函数,这时候这个函数里面已经可以调用我们放在数组的东西了,如图
在这里插入图片描述
在这里插入图片描述
接着就是当我们三秒后,setTimeOut走完后,执行resolve时,对resolve函数做一点改变,在这里插入图片描述
那么我们之前的同步操作会不会受影响呢,答案是不会的,因为同步的时候,那两个数组是没有东西的,所以遍历执行也没啥。而因为是同步,then里面的state永远不会是pending,所以不必操心,看成果。
在这里插入图片描述
大功告成。

上面就是简单版Promise的实现,接下来才是重难点,链式调用

我们上面的.then之后,啥也没返回,这是不对的,因为真正的Promise是要求then的时候也返回一个promise对象,

xxxx未完待续

猜你喜欢

转载自blog.csdn.net/lin_fightin/article/details/114070604
今日推荐