[ JS 進階 ] 異步編程 promise模式 的簡單實現

異步編程

javascript異步編程, web2.0時代比較熱門的編程方式，咱們平時碼的時候也或多或少用到，最典型的就是異步ajax，發送異步請求，綁定回調函數，請求響應以後調用指定的回調函數，沒有阻塞其餘代碼的執行。還有像setTimeout方法一樣也是異步執行回調的方法。

若是對異步編程還不太熟悉的話，直接戳阮一峯大牛的教程，這篇文章介紹了四種異步編程的方式：

• 回調函數
• 事件監聽
• 發佈/訂閱
• promise模式

這幾種方式的可維護性逐級遞增，理解難度也逐級遞增。這篇總結也是針對promise模式的。

promise模式

那麼多中異步編程的方式，爲何選擇promise, 由於前面幾種方式不夠靈活，用起來不夠痛快，不優雅。爲了下降異步編程的複雜性，因此promise。

promise的核心是有一個promise對象，這個對象有一個重要的then()方法, 它用於指定回調函數，如：

f1().then(f2);

promise模式在任什麼時候刻都有三種狀態：已完成（resolved），未完成（unfulfilled），那麼then()方法就是爲狀態變化指定不一樣的回調函數，並老是返回一個promise對象，方便鏈式調用。

那promise模式下，返回的數據如何在各個回調函數之間傳播呢，經過resolve方法，你能夠將一個函數的返回值做爲參數傳遞給另外一個函數，而且將另外一個函數的返回值做爲參數再傳遞給下一個函數……像一條「鏈」同樣無限的這麼作下去。

代碼實現

經過建立一個Promise構造函數來實現promise模式:

//constructor
var Promise = function() {
    this.callbacks = [];
}

Promise.prototype = {
    construct: Promise,
    resolve: function(result) {
        this.complete("resolve", result);
    },

    reject: function(result) {
        this.complete("reject", result);
    },

    complete: function(type, result) {
        while (this.callbacks[0]) {
            this.callbacks.shift()[type](result);
        }
    },

    then: function(successHandler, failedHandler) {
        this.callbacks.push({
            resolve: successHandler,
            reject: failedHandler
        });

        return this;
    }
}

// test
var promise = new Promise();

var delay1 = function() {
    setTimeout(function() {
        promise.resolve('數據1');
    }, 1000);
    return promise;
};

var callback1 = function(re) {

    re = re + '數據2';
    console.log(re);
};

delay1().then(callback1)

代碼分析

咱們可看到一個簡單的promise對象的構造函數的結構：

• callbacks: 用於管理回調函數
• resolve: 請求成功時執行的方法
• reject:請求失敗時執行的方法
• complete: 執行回調
• then：綁定回調函數

測試：

var promise = new Promise();

var delay1 = function() {
    setTimeout(function() {
        promise.resolve('數據1');
    }, 1000);
    return promise;
};

var callback1 = function(re) {

    re = re + '數據2';
    console.log(re);
    promise.resolve(re);
};

var callback2 = function(re) {

    console.log(re + '數據3');

};

delay1().then(callback1).then(callback2);

結果：

一秒以後輸出：

分析：

//第一步
var delay1 = function() {
    setTimeout(function() {
        promise.resolve('數據1');
    }, 1000);
    return promise;
};

這個函數經過setTimeout方法，異步傳遞一個數據1，並返回一個promise對象(必須)。

//第二步
var callback1 = function(re) {

    re = re + '數據2';
    console.log(re);
    promise.resolve(re);
};

callback1和callback2都是要經過then方法註冊的回調函數，其中callback1經過resolve方法把數據往下傳遞。

//第三步
delay1().then(callback1).then(callback2);

delay1()方法執行完，由於返回了一個promise對象，因此能夠再調用then()方法爲delay1()的setTimeout異步執行操做指定回調函數, 又由於then()方法也返回的是promise對象，因此還能夠再調用then方法

//第四步
    setTimeout(function() {
        promise.resolve('數據1');
    }, 1000);

一秒以後，當其餘代碼執行完成，開始執行異步代碼promise.resolve('數據1');，這裏調用promise的resolve()方法，指定了一個成功狀態，並把數據1做爲參數。

//第五步
    resolve: function(result) {
        this.complete("resolve", result);
    },


    //第六步：循環執行回調，將上一個回調的結果傳遞給下一個回調
    complete: function(type, result) {
        while (this.callbacks[0]) {
            this.callbacks.shift()[type](result);
        }
    },

這其中比較難理解的就是第五，六步。

難理解請參考：

Promise/A的誤區以及實踐
JavaScript異步編程的Promise模式
Javascript異步編程的4種方法