手动实现一个promise

忘是亡心i 2022-12-06 04:10 132阅读 0赞

> 1.  Promise的参数是一个函数，这个函数有2个参数，分别是resolve 和reject
> 2.  Promise的状态一开始是pending，满足某些条件是，状态变为resolved， 不满足某些条件时，状态变为rejected
> 3.  通常通过将Promise作为一个构造函数，通过new 进行调用
> 4.  会在then()中接收，resolve 和reject的返回信息

### 1、基础版 ###

![在这里插入图片描述][20201012193239228.gif_pic_center]

这样，一个最最基本的promise实现了，测试了下是可以正常执行的。  
但是有个问题。。。。。。。很多时候不是resolve不是同步进行的。比如定时器。ajax请求之类的操作结束之后才 resolve，改变promise的状态。。。。。。。。。。

### 2、使用定时器实现异步 ###

目前想到的解决方式是：async await 或者定时器

**2.1 定时器 方法实现**

> 改写then方法。当this.status=="pending"时一直不停的调用自身，直到this.status的状态改变。改变之后，执行then的回调函数resoveCallback或者rejectCallback

Promise_.prototype.then =  function (resolveCallback, rejectCallback) { 
                var _this = this;
                if (this.status === "resolved") { 
                    resolveCallback(this.resolveValue)
                }
                if (this.status === "rejected") { 
                    rejectCallback(this.rejectValue)
                }
                if (this.status === "pending") { 
                    var se = setInterval(function () { 
                        if (_this.status === "resolved") { 
                            resolveCallback(_this.resolveValue);
                            clearInterval(se);
                        }
                        if (_this.status === "rejected") { 
                            rejectCallback(_this.rejectValue)
                            clearInterval(se);
                        }
                    }, 50)   
                }
            }

异步 修改promise的状态

setTimeout(function () { 
                        resolve("大于10");                 
                    }, 3000)

测试了一下，基本符合了要求，同步的部分直接打印。而resolve的部分则在3秒之后 打印。。。。  
![在这里插入图片描述][20201012193700931.gif_pic_center]

不知道为毛。。。感觉怪怪的。。。。。。

[20201012193239228.gif_pic_center]: /images/20221123/c4a13e8a1f0d4b608f7fd860fea9359b.png
[20201012193700931.gif_pic_center]: /images/20221123/419e55df615346ecbbc7b8e61efddd0b.png