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;
    }
}