JS专题系列之Promise的原理及实现

一、Promise概念

Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

promise解决的问题

回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象

promise可以支持多个并发的请求，获取并发请求中的数据

这个promise可以解决异步的问题，本身不能说promise是异步的

二、分析Promise

如果我们想要封装promise就需要考虑以下几个问题

如何让Promise变成一个微任务

如何管理Promise的状态

then方法的返回值问题

静态方法: resolve 、reject、all、race

三、基于ES6实现AlleyPromise

Promise的构造函数必须接受一个函数参数(也就是需要执行异步任务的函数)，这个函数传入后立即调用，该函数有2个参数也就说resolve和reject,如果我们在调用Promise的时候没有传入参数则会抛出异常

new Promise(); // Uncaught TypeError: Promise resolver undefined is not a function

另外Promise是有三个状态 pending(等待态)，fulfiled(成功态)，rejected(失败态),因此我们需要在初始状态保持PENDING状态，调用resolve的时候保持FULFILED状态,调用reject的时候保持REJECTED状态

我们要注意的是如果Promise的状态更改过一次后就不会再次进行更改,例如先调用了resolve然后又调用了reject那么状态只会保持为FULFILED状态而非REJECTED状态

1、根据以上已知条件我们就可以进行第一步的封装

class AlleyPromise{
    // 1、Promise三种状态
    static PENDING = 'PENDING';
    static FULFILED = 'FULFILED';
    static REJECTED = 'REJECTED';

    public value:any;
    private promiseStatus:string;


    constructor(callback){
        // 2、容错处理
        if(typeof callback !== 'function'){
            throw new TypeError('Promise resolver undefined is not a function')
        }

        //3、初始状态
        this.promiseStatus = AlleyPromise.PENDING;

        //4、定义初始值
        this.value;

        //5、调用callback函数
        callback(this._resolve.bind(this),this._reject.bind(this))
    }
   private _resolve(){
        // 6、更改成功状态
        if(this.promiseStatus !== AlleyPromise.PENDING) return;
        this.promiseStatus = AlleyPromise.FULFILED;
    }
    private _reject(){
        // 7、更改失败状态
        if(this.promiseStatus !== AlleyPromise.PENDING) return;
        this.promiseStatus = AlleyPromise.REJECTED;
    }
}

接下来我们就需要处理的事情就是then方法的封装

then方法接收2个参数，一个是成功的回调，一个是失败的回调

每个回调中会有相对应的参数进行传递

resolve||reject函数调用完成后在执行then函数中的回调

条件1与条件2相对比较简单，条件3我们如何管理? 其实很简单，then函数在执行的时候我们将then函数中的回调注册到一个队列中去，当resolve || reject 函数调用的时候我们在从队列中读取执行即可

this.resolveQueue = [];
this.rejectQueue = [];

_resolve(val){
  // 更改成功状态
  if(this.promiseStatus !== AlleyPromise.PENDING) return;
  this.promiseStatus = AlleyPromise.FULFILED;
    this.value = val;
  let handler;
  while(handler = this.resolveQueues.shift()){
    handler(this.value)
  }
}

then(resolveHandler,rejectHandler) {
   this.resolveQueues.push(resolveHandler)
   this.rejectQueues.push(rejectHandler)
}

2、根据以上已知条件我们就可以进行第一步的封装

class AlleyPromise{
    // 1、Promise三种状态
    static PENDING = 'PENDING';
    static FULFILED = 'FULFILED';
    static REJECTED = 'REJECTED';

    public value:any;

    private promiseStatus:string;
    private resolveQueues:Function[];
    private rejectQueues:Function[];

    constructor(callback){
        // 容错处理
        if(typeof callback !== 'function'){
            throw new TypeError('Promise resolver undefined is not a function')
        }

        // 初始状态
        this.promiseStatus = AlleyPromise.PENDING;
        
        // 定义resolve函数队列 reject函数队列
        this.resolveQueues = [];
        this.rejectQueues = [];

        //定义初始值
        this.value;

        //调用callback函数
        callback(this._resolve.bind(this),this._reject.bind(this))
    }
   private _resolve(val){
        // 更改成功状态
        if(this.promiseStatus !== AlleyPromise.PENDING) return;
        this.promiseStatus = AlleyPromise.FULFILED;
                this.value = val;
        let handler;
        while(handler = this.resolveQueues.shift()){
            handler(this.value )
        }
    }
    private _reject(){
        // 更改失败状态
        if(this.promiseStatus !== AlleyPromise.PENDING) return;
        this.promiseStatus = AlleyPromise.REJECTED;
        this.value = val;
        let handler;
        while(handler = this.rejectQueues.shift()){
            handler(this.value)
        }
    }
    public then(resolveHandler,rejectHandler) {
        this.resolveQueues.push(resolveHandler)
        this.rejectQueues.push(rejectHandler)
    }
}

截止到目前为止我们就封装好了一个简易版的promise但是依旧有很多问题，我们进行逐一排查

当promise回调函数中的代码逻辑不是异步的时候，我们会发现then方法不会被调用

promise可以进行链式调用，依旧是说then方法的返回值应该是一个promise

错误演示

new AlleyPromise((resolve,reject)=>{
    resolve("执行")
}).then((val)=>{
    console.log(val); // 这里不会进行console,原因是resolve调用完毕后才会调用then，事件队列中的函数根本没有push进去
})

解决方案也很简单,我们只需要保证我们代码块中的_resolve && _reject是异步的就可以了，这样等then方法执行完毕后，_resolve && _reject才会去执行

但是需要注意的是因为promise是微任务，所以我们不能使用setTimeout，这里面我们可以使用postMessage

_resolve(val){
  window.addEventListener('message',()=>{
    // 更改成功状态
    if(this.promiseStatus !== AlleyPromise.PENDING) return;
    this.promiseStatus = AlleyPromise.FULFILED;
    this.value = val;
    let handler;
    while(handler = this.resolveQueues.shift()){
      handler(this.value)
    }
  })
  window.postMessage('')
}

_reject(val){
  window.addEventListener('message',()=>{
    // 更改失败状态
    if(this.promiseStatus !== AlleyPromise.PENDING) return;
    this.promiseStatus = AlleyPromise.REJECTED;
    this.value = val;
    let handler;
    while(handler = this.rejectQueues.shift()){
      handler(this.value)
    }
  })
  window.postMessage('')
}

解决完问题一后完们来解决问题二Promise链式调用的问题，说到链式调用我们肯定知道只需要在then方法中返回一个promise即可，但是这样真的可以吗？我们来做下测试

class AlleyPromise{
    // 1、Promise三种状态
    static PENDING = 'PENDING';
    static FULFILED = 'FULFILED';
    static REJECTED = 'REJECTED';

    constructor(callback){
        // 容错处理
        if(typeof callback !== 'function'){
            throw new TypeError('Promise resolver undefined is not a function')
        }

        // 初始状态
        this.promiseStatus = AlleyPromise.PENDING;
        
        // 定义resolve函数队列 reject函数队列
        this.resolveQueues = [];
        this.rejectQueues = [];

        //定义初始值
        this.value;

        //调用callback函数
        callback(this._resolve.bind(this),this._reject.bind(this))
    }
    _resolve(val){
        window.addEventListener('message',()=>{
            // 更改成功状态
            if(this.promiseStatus !== AlleyPromise.PENDING) return;
            this.promiseStatus = AlleyPromise.FULFILED;
            this.value = val;
            let handler;
            while(handler = this.resolveQueues.shift()){
                handler(this.value)
            }
        })
        window.postMessage('')
    }
     _reject(val){
        window.addEventListener('message',()=>{
            // 更改失败状态
            if(this.promiseStatus !== AlleyPromise.PENDING) return;
            this.promiseStatus = AlleyPromise.REJECTED;
            this.value = val;
            let handler;
            while(handler = this.rejectQueues.shift()){
                handler(this.value)
            }
        })
        window.postMessage('')
    }
    then(resolveHandler,rejectHandler) {
        this.resolveQueues.push(resolveHandler)
        this.rejectQueues.push(rejectHandler)

        return new AlleyPromise((resolve,reject)=>{
            resolve()
        })
    }
}



// 测试
new AlleyPromise((resolve,reject)=>{
        setTimeout(() => {
            resolve()
        }, 10);
}).then(()=>{
  console.log('then1'); // 后输出
}).then(()=>{
  console.log('then2'); // 先输出
})

上面代码中我们会发现then2 先输出 then1后输出，原因也很简单因为我们then方法返回出去的那个promise回调中的代码是同步的，它会优先执行，而then1中的代码还在事件队列中，而我们的事件队列是一个异步的方法

解决方案: 其实我们只需要将return new AlleyPromise((resolve,reject)=>{ resolve() })中的resolve也加入到事件队列中即可

then(resolveHandler,rejectHandler) {   
  return new AlleyPromise((resolve,reject)=>{
    function newResolveHandler(){
      resolveHandler();
      resolve();
    }

    function newRejectHandler(){
      rejectHandler();
      reject();
    }


    this.resolveQueues.push(newResolveHandler)
    this.rejectQueues.push(newRejectHandler)
  })
}

// 测试
new AlleyPromise((resolve,reject)=>{
        setTimeout(() => {
            resolve()
        }, 10);
}).then(()=>{
  console.log('then1'); // 先输出
}).then(()=>{
  console.log('then2'); // 后输出
})

边界处理

这样我们的then方法就封装完毕了吗？其实不是的还有好多边界情况需要处理，例如以下问题

then方法中的回调函数接收不到参数

如果我们在调用then方法的时候return出去一个值后后面的then方法能接收到这个值吗？

错误演示

new AlleyPromise((resolve,reject)=>{
  setTimeout(() => {
    resolve(123)
  }, 10);
}).then((val)=>{
  console.log('then1',val);// then1 undefined
  return '456'
}).then((val)=>{
  console.log('then2',val)// then2 undefined
})

错误一的解决很简单newResolveHandler函数其实就是我们存入事件队列中的函数，事件队列中的函数会接收到传递的值

then(resolveHandler,rejectHandler) {     
  return new AlleyPromise((resolve,reject)=>{
    function newResolveHandler(val){
      resolveHandler(val);
      resolve();
    }

    function newRejectHandler(val){
      rejectHandler(val);
      reject();
    }


    this.resolveQueues.push(newResolveHandler)
    this.rejectQueues.push(newRejectHandler)
  })
}

// 测试
new AlleyPromise((resolve,reject)=>{
  setTimeout(() => {
    resolve(123)
  }, 10);
}).then((val)=>{
  console.log('then1',val);// then1 123
  return '456'
}).then((val)=>{
  console.log('then2',val)// then2 undefined
})

错误二我们需要加一些边界判断来完成

    then(resolveHandler,rejectHandler) {  
        return new AlleyPromise((resolve,reject)=>{
           function newResolveHandler(val){
               // 首先判断 resolveHandler是否是一个函数
               if(typeof resolveHandler === 'function') {
                   /*
                    获取resolveHandler 函数的返回值进行判断
                    如果是promise则继续.then，不是则直接将结果返回
                    */
                    let result = resolveHandler(val);
                    if(result instanceof AlleyPromise){
                        result.then(resolve,reject)
                    } else{
                        resolve(result);
                    }
                    
               } else {
                   resolve(val);
               }
                
           }

           function newRejectHandler(val){
               if(typeof rejectHandler === 'function') {
                    let result  =  rejectHandler(val);
                    if(result instanceof AlleyPromise){
                        result.then(resolve,reject)
                    }else{
                        reject(result);
                    }
                
               } else {
                    reject(val);
               }
                
            }


            this.resolveQueues.push(newResolveHandler)
            this.rejectQueues.push(newRejectHandler)
        })
    }

3、catch方法封装

catch方法封装也挺简单其实也就是then方法第一个参数不需要传递即可

catch(rejectHandler){
  return this.then(undefined,rejectHandler)
}

4、静态方法all方法封装

all方法封装就比较简单了,all函数接收一个Promise[]类型的数组，需要保证这个数组中所有的promise都执行成功后执行resolve返回所有的值

static all(iterator){
  let len = iterator.length;
  let n = 0;
  let vals = [];
  return new AlleyPromise((resolve,reject)=>{
    iterator.forEach((item)=>{
      item.then((val)=>{
        ++n;
        vals.push(val);
        if(len === n) {
          resolve(vals);
        }

      }).catch((e)=>{
        reject(e);
      })
    })
  }

5、静态方法race封装

race封装其实和all一样，只不过race是只要数组中的Promise只要有一个完成的就会调用resolve方法，不需要统计个数

static race(iterator){
        return new AlleyPromise((resolve,reject)=>{
            iterator.forEach((item)=>{
                item.then((val)=>{
                    resolve(val);
                }).catch((e)=>{
                    reject(e);
                })
            })
        })
    }

6、静态方法resolve封装

static resolve(val){
  return new AlleyPromise((resolve)=>{
    resolve(val)
  })
}

7、静态方法reject封装

static reject(val){
  return new AlleyPromise((resolve,reject)=>{
    reject(val)
  })
}

最后完整版封装

class AlleyPromise{
    // 1、Promise三种状态
    static PENDING = 'PENDING';
    static FULFILED = 'FULFILED';
    static REJECTED = 'REJECTED';

    constructor(callback){
        // 容错处理
        if(typeof callback !== 'function'){
            throw new TypeError('Promise resolver undefined is not a function')
        }

        // 初始状态
        this.promiseStatus = AlleyPromise.PENDING;
        
        // 定义resolve函数队列 reject函数队列
        this.resolveQueues = [];
        this.rejectQueues = [];

        //定义初始值
        this.value;

        //调用callback函数
        callback(this._resolve.bind(this),this._reject.bind(this))
    }
    _resolve(val){
        window.addEventListener('message',()=>{
            // 更改成功状态
            if(this.promiseStatus !== AlleyPromise.PENDING) return;
            this.promiseStatus = AlleyPromise.FULFILED;
            this.value = val;
            let handler;
            while(handler = this.resolveQueues.shift()){
                handler(this.value)
            }
        })
        window.postMessage('')
    }
     _reject(val){
        window.addEventListener('message',()=>{
            // 更改失败状态
            if(this.promiseStatus !== AlleyPromise.PENDING) return;
            this.promiseStatus = AlleyPromise.REJECTED;
            this.value = val;
            let handler;
            while(handler = this.rejectQueues.shift()){
                handler(this.value)
            }
        })
        window.postMessage('')
    }
    then(resolveHandler,rejectHandler) {  
        return new AlleyPromise((resolve,reject)=>{
           function newResolveHandler(val){
               // 首先判断 resolveHandler是否是一个函数
               if(typeof resolveHandler === 'function') {
                   /*
                    获取resolveHandler 函数的返回值进行判断
                    如果是promise则继续.then，不是则直接将结果返回
                    */
                    let result = resolveHandler(val);
                    if(result instanceof AlleyPromise){
                        result.then(resolve,reject)
                    } else{
                        resolve(result);
                    }
                    
               } else {
                   resolve(val);
               }
                
           }

           function newRejectHandler(val){
               if(typeof rejectHandler === 'function') {
                    let result  =  rejectHandler(val);
                    if(result instanceof AlleyPromise){
                        result.then(resolve,reject)
                    }else{
                        reject(result);
                    }
                
               } else {
                    reject(val);
               }
                
            }


            this.resolveQueues.push(newResolveHandler)
            this.rejectQueues.push(newRejectHandler)
        })
    }
    catch(rejectHandler){
        return this.then(undefined,rejectHandler)
    }
    static all(iterator){
        let len = iterator.length;
        let n = 0;
        let vals = [];
        return new AlleyPromise((resolve,reject)=>{
            iterator.forEach((item)=>{
                item.then((val)=>{
                    ++n;
                    vals.push(val);
                    if(len === n) {
                        resolve(vals);
                    }

                }).catch((e)=>{
                    reject(e);
                })
            })
        })
    }
    static race(iterator){
        return new AlleyPromise((resolve,reject)=>{
            iterator.forEach((item)=>{
                item.then((val)=>{
                    resolve(val);
                }).catch((e)=>{
                    reject(e);
                })
            })
        })
    }
    static resolve(val){
        return new AlleyPromise((resolve)=>{
            resolve(val)
        })
    }
    static reject(val){
        return new AlleyPromise((resolve,reject)=>{
            reject(val)
        })
    }
}

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

JS专题系列之Promise的原理及实现

一、Promise概念

二、分析Promise

三、基于ES6实现AlleyPromise

推荐阅读更多精彩内容