不积跬步之手写Promise(上)

promise.jpeg

我们从最简单的切入口开始。

1.整体结构的搭建

要实现的官方的功能

let p = new Promise((resolve,reject)=>{
    resolve("ok");
});

p.then(value=>{
    console.log(value);
},reason => {
    console.log(reason)
});

观察上面的结构:

  1. Promise构造函数有一个回调函数 我们就给起名字为executor
  2. 实例对象上面有个then方法
  3. then方法有两个回调函数 onResolved,onRejected

为了和Promise做区分,这里起名字为PromiseA目标就明朗了,我们的实现版本如下:

function PromiseA(executor){

}

PromiseA.prototype.then = function (onResolved,onRejected){

}

测试用例:

let p1 = new PromiseA((resolve,reject)=>{
    resolve("ok");
});

p1.then(value=>{
    console.log(value);
},reason => {
    console.log(reason)
});
//没有报错,说明实现了我们最初的目的

2.resolve和reject的搭建

let p = new Promise((resolve,reject)=>{
    resolve("ok");
});

p.then(value=>{
    console.log(value);
},reason => {
    console.log(reason)
});

2.1 还是观察官方的例子,发现构造函数中的回调函数中

构造函数中的是同步调用的 怎么同步调用呢? 我们直接在构造函数里面把回调函数exector调用一下就可以

function PromiseA(executor){
    //同步调用一下
    executor();
}

2.2 同步调用以后发现,回调函数里面还有两个回调的参数.resolve和reject.那么这两个参数是哪里来的呢?他们是什么?

通过观察发现 resolve("ok").原来它们都是函数,同时这个函数里面还有 调用的时候传入的参数.好,安排.

function PromiseA(executor){
    function resolve(data){
    
    }
    
    function reject(data){
    
    }
    //同步调用一下
    executor(resolve,reject);
}

3.resolve和reject的实现

在之前的研究中我们知道resolve("OK")被调用的时候,它会有以下两个作用:

  • 修改实例对象Promise的状态为fulfilled.
  • 它传入的参数ok就是结果值

所以我们需要实现这两步:

  1. 修改状态---那么就需要一个初始状态
  2. 改变结果值---那么就需要一个存储结果值的参数

我们看一下官网Promise的内部状态

[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "OK"

可以看到它内部有两个内部属性:PromiseState和PromiseResult.那我们就知道了怎么做了.

function PromiseA(executor){
    //添加属性
    this.PromiseState = "pending";
    this.PromiseResult = null;
    //resolve函数
    function resolve(data){
        //1.修改对象的状态(PromiseState)
        this.PromiseState = "fulfilled";
        //2.设置对象的结果值(PromiseResult)
        this.PromiseResult = data;
    }
    
    function reject(data){
    
    }
    //同步调用一下
    executor(resolve,reject);
}

这里有一个问题,我们调用上面的实例会发现:

let p1 = new PromiseA((resolve,reject)=>{
    resolve("ok");
});
console.log(p1)
// PromiseA { PromiseState: 'pending', PromiseResult: null }

我们的修改这里并没有生效,这是因为函数在单独的环境中调用,它是指向window的.所以我们这里可以借助词法作用域的特性来解决这个问题. 通过设定一个selt来保存this的值

function PromiseA(executor){
    //添加属性
    this.PromiseState = "pending";
    this.PromiseResult = null;
    //预先保存实例对象的this值
    const self = this;
    
    //resolve函数
    function resolve(data){
        //1.修改对象的状态(PromiseState)
        self.PromiseState = "fulfilled";
        //2.设置对象的结果值(PromiseResult)
        self.PromiseResult = data;
    }
    
    function reject(data){
        //1.修改对象的状态(PromiseState)
        self.PromiseState = "rejected";
        //2.设置对象的结果值(PromiseResult)
        self.PromiseResult = data;
    }
    //同步调用一下
    executor(resolve,reject);
}

reject同理 ,就实现了我们上面的这一版

4. throw 抛出异常改变状态

这一节我们实现的状态是 throw抛出异常会改变状态.

let p1 = new Promise((resolve,reject)=>{
    throw "error"
});

console.log(p1)

 Promise {<rejected>: 'error'}
 [[Prototype]]: Promise
 [[PromiseState]]: "rejected"
 [[PromiseResult]]: "error"

可以看到官放的Promise 在其内部报错的时候,它会把内部的throw处理掉,同时把状态修改,
把错误的结果放到PromiseResult中.

function PromiseA(executor){
    //添加属性
    this.PromiseState = "pending";
    this.PromiseResult = null;
    //预先保存实例对象的this值
    const self = this;
    
    //resolve函数
    function resolve(data){
        //...
    }
    function reject(data){
       //...
    }
    //-------------- 修改的代码-----------------
    try{
        //同步调用一下
        executor(resolve,reject);
    }catch (e){
        //通过调用reject函数,它的内部可以修改状态的和赋值
        //所以我们这里可以把错误直接传进去就可以了.
        reject(e);
    }
    //-------------- 修改的代码-----------------
}

既然要处理错误,我们就添加一个try catch 然后通过reject 来处理内部的状态和数据.

看一下测试用例的输出:

let p1 = new PromiseA((resolve,reject)=>{
    throw "error"
});

console.log(p1)

//PromiseA { PromiseState: 'rejected', PromiseResult: 'error' }

5.内部的状态只能修改一次

内部状态只能修改一次,就是说 我们先调用了resolve,然后调用reject,并不能把状态fulfilled修改为了rejected.

那么怎么实现呢? 只需要添加个判断就好

function PromiseA(executor){
    //添加属性
    this.PromiseState = "pending";
    this.PromiseResult = null;
    //预先保存实例对象的this值
    const self = this;
    
    //resolve函数
    function resolve(data){
        //-------------- 修改的代码-----------------
        //判断状态
        if(self.PromiseState !== "pending"){
            return ;
        }
        //-------------- 修改的代码-----------------
        //1.修改对象的状态(PromiseState)
        self.PromiseState = "fulfilled";
        //2.设置对象的结果值(PromiseResult)
        self.PromiseResult = data;
    }
    
    function reject(data){
        //-------------- 修改的代码-----------------
        //判断状态
        if(self.PromiseState !== "pending"){
            return ;
        }
        //-------------- 修改的代码-----------------
        //1.修改对象的状态(PromiseState)
        self.PromiseState = "rejected";
        //2.设置对象的结果值(PromiseResult)
        self.PromiseResult = data;
    }
    
    //处理 throw 抛出的错误
    try{
        //同步调用一下
        executor(resolve,reject);
    }catch (e){
        //通过调用reject函数,它的内部可以修改状态的和赋值
        //所以我们这里可以把错误直接传进去就可以了.
        reject(e);
    }
}

测试用例: 可以看到我们的状态并没有被再次改变为rejected

let p1 = new PromiseA((resolve,reject)=>{
    resolve("ok");
    reject("error");
});
console.log(p1)

//PromiseA { PromiseState: 'fulfilled', PromiseResult: 'ok' }

6.then方法的实现

官方的then方法接收两个函数的回调参数,分别对应于成功的情况和失败的情况.
当new Promise的构造函数中调用resolve,那么对应的then方法中就会执行第一个回调函数.
当new Promise的构造函数中调用reject,那么对应的then方法中就会执行第二个回调函数.

let p = new Promise((resolve,reject)=>{
    throw "error"
});
p.then(value=>{
    console.log(value)
},reason => {
    console.log(reason)
})

所以我们的then方法的两个形参 对应的 Promise的两个实参. onResolved和onRejected

//添加 then 方法
PromiseA.prototype.then = function (onResolved,onRejected){
   
}

既然构造函数 执行resolve ,就会调用onResolved,所以需要在then方法中进行调用.

//添加 then 方法
PromiseA.prototype.then = function (onResolved,onRejected){
    //调用 成功 回调函数
    onResolved();
    //调用失败的回调函数
    onRejected();
}

但是这样调用的话,且不是两个都调用了,我们需要区分情况来对待.成功的时候调用onResolved,
失败的时候调用onRejected.所以应该怎么区分情况呢?

//添加 then 方法
PromiseA.prototype.then = function (onResolved,onRejected){
    //调用 成功 回调函数
    if(this.PromiseState === "fulfilled"){
        onResolved();
    }
    //调用失败的回调函数
    if(this.PromiseState === "rejected"){
        onRejected();
    }
}

既然then方法是构造函数执行完毕返回实例之后,通过实例调用的.这里就有了隐式绑定this.
这个时候this绑定的是实例对象p.所以我们这个时候可以通过this,拿到实例对象中的状态和数据.
PromiseState和PromiseResult.

then方法的两个函数回调中,会返回实例对象执行结果的数据,所以我们在调用onResolved和onRejected的时候,给它们传入实例的执行结果 PromiseResult.

所以最后就是这样:

//添加 then 方法
PromiseA.prototype.then = function (onResolved,onRejected){
    //调用 成功 回调函数
    if(this.PromiseState === "fulfilled"){
        onResolved(this.PromiseResult);
    }
    //调用失败的回调函数
    if(this.PromiseState === "rejected"){
        onRejected(this.PromiseResult);
    }
}

7.异步任务 then 方法实现

异步任务的实现就是:

let p = new PromiseA((resolve,reject)=>{
    //异步调用
    setTimeout(()=>{
        resolve("OK");
    },100)
});
console.log(p);

p.then(value=>{
    console.log(value)
},reason => {
    console.log(reason)
})

//PromiseA { PromiseState: 'pending', PromiseResult: null }

我们之前在构造函数中都是同步调用resolve,在执行的下面的then的时候,实际上状态已经修改为
fulfilled或者rejected.

而异步调用的话,可以看上面的打印输出.实例的状态是pending.它的状态是在未来的某个时间进行的改变.
而我们的then方法中,却并没有对pending状态的处理,所以我们需要给它添加一下.

//添加 then 方法
PromiseA.prototype.then = function (onResolved,onRejected){
    //调用 成功 回调函数
    if(this.PromiseState === "fulfilled"){
        onResolved(this.PromiseResult);
    }
    //调用失败的回调函数
    if(this.PromiseState === "rejected"){
        onRejected(this.PromiseResult);
    }
    
    //添加pending状态的处理
    if(this.PromiseState === "pending"){
        //...
    }
}

那这里应该怎么处理呢?
由于是异步调用的原因,当同步执行到then方法的时候,它的内部状态还是pending,所以给同步代码使用的

 //调用 成功 回调函数
    if(this.PromiseState === "fulfilled"){
        onResolved(this.PromiseResult);
    }
    //调用失败的回调函数
    if(this.PromiseState === "rejected"){
        onRejected(this.PromiseResult);
    }

就用不上了,而内部状态的改变是在未来的某个地方进行的? 是在哪里呢?

function PromiseA(executor){
    //添加属性
    //....
    //resolve函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== "pending"){
            return ;
        }
        //--------------- 在未来某个地方改变状态的就是这里----------
        //1.修改对象的状态(PromiseState)
        self.PromiseState = "fulfilled";
        //2.设置对象的结果值(PromiseResult)
        self.PromiseResult = data;
    }
    function reject(data){
        //判断状态
        //....
    }
    //处理 throw 抛出的错误
    //...
}

所以我们需要在状态改变的地方去调用then方法的回调. ,也就是需要一个变量把then方法的两个回调函数
保存起来,然后在构造函数resolve的改变状态的地方进行调用.所以我们定义一个callback变量来存储回调参数.

function PromiseA(executor){
    //添加属性
    this.PromiseState = "pending";
    this.PromiseResult = null;
     //-------------- 修改的代码-----------------
    this.callback = {};
     //-------------- 修改的代码-----------------
    //预先保存实例对象的this值
    const self = this;
    
    //resolve函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== "pending"){
            return ;
        }
        //1.修改对象的状态(PromiseState)
        self.PromiseState = "fulfilled";
        //2.设置对象的结果值(PromiseResult)
        self.PromiseResult = data;
         //-------------- 修改的代码-----------------
        //调用成功的回调函数
        if(self.callback.onResolved){
            //参数是成功的结果
            self.callback.onResolved(data);
        }
         //-------------- 修改的代码-----------------
    }
    
    function reject(data){
        //判断状态
        // ...
    }
    
    //处理 throw 抛出的错误
    //....
}

我们在then方法的中判断pending来保存callback;

//添加 then 方法
PromiseA.prototype.then = function (onResolved,onRejected){
    //调用 成功 回调函数
    if(this.PromiseState === "fulfilled"){
        onResolved(this.PromiseResult);
    }
    //调用失败的回调函数
    if(this.PromiseState === "rejected"){
        onRejected(this.PromiseResult);
    }
    //-------------- 修改的代码-----------------
    //添加pending状态的处理
    if(this.PromiseState === "pending"){
        //保存回调函数
        this.callback = {
            onResolved,
            onRejected
        };
    }
    //-------------- 修改的代码-----------------
}

测试用例:

let p = new PromiseA((resolve,reject)=>{
    //异步调用
    setTimeout(()=>{
        resolve("OK");
    },100)
});
p.then(value=>{
    console.log(value)
},reason => {
    console.log(reason)
})
//输出 OK
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345

推荐阅读更多精彩内容