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