[ 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);
        }
    },

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