歡迎光臨
每天分享高質量文章

JavaScript異步編程(1):ECMAScript 6的Promise物件

JavaScript的Callback機制深入人心。而ECMAScript的世界同樣充斥的各種異步操作(異步IO、setTimeout等)。異步和Callback的搭載很容易就衍生”回呼金字塔”。——由此產生Deferred/Promise。

Deferred起源於Python,後來被CommonJS挖掘併發揚光大,得到了大名鼎鼎的Promise,並且已經納入ECMAScript 6(JavaScript下一版本)。

Promise/Deferred是當今最著名的異步模型,不僅強壯了JavaScript Event Loop(事件輪詢)機制下異步代碼的模型,同時增強了異步代碼的可靠性。—— 匠者為之,以惠匠者。

本文內容如下:

  • Promise應對的問題
  • Promise的解決
  • ECMAScript 6 Promise
  • 參考和取用

Promise應對的問題

JavaScript充斥著Callback,例如下麵的代碼:

(function (num) {//從外面接收一個引數

var writeName = function (callback) {

if (num === 1)

callback();

}

writeName(function () {//callback

console.log(“i’m linkFly”);

});

})(1);

把一個函式通過引數傳遞,那麼這個函式叫做Callback(回呼函式)。

JavaScript也充斥著異步操作——例如ajax。下麵的代碼就是一段異步操作:

var name;

setTimeout(function () {

name = ‘linkFly’;

}, 1000);//1s後執行

console.log(name);//輸出undefined

這段代碼的運行邏輯是這樣的:

我們的總是遇見這樣的情況:一段代碼異步執行,後續的代碼卻需要等待異步代碼的,如果在異步代碼之前執行,就會如上面的console.log(name)一樣,輸出undefined,這並不是我們想要的效果。

類似的情況總是發生在我們經常要使用的ajax上:

$.ajax({

url: ‘http://www.cnblogs.com/silin6/map’,

success: function (key) {

//我們必須要等待這個ajax加載完成才能發起第二個ajax

$.ajax({

url: ‘http://www.cnblogs.com/silin6/source/’ + key,

success: function (data) {

console.log(“i’m linkFly”);//後輸出

}

});

}

});

console.log(‘ok’);//ok會在ajax之前執行

異步操作有點類似這一段代碼被掛起,先執行後續的代碼,直到異步得到響應(例如setTimeout要求的1s之後執行,ajax的服務器響應),這一段異步的代碼才會執行。關於這一段異步代碼的執行流程,請參閱JavaScript大名鼎鼎的:Event Loop(事件輪詢)。

Promise的解決

Promise優雅的修正了異步代碼,我們使用Promise重寫我們setTimeout的示例:

var name,

p = new Promise(function (resolve) {

setTimeout(function () {//異步回呼

resolve();

}, 1000);//1s後執行

});

p.then(function () {

name = ‘linkFly’;

console.log(name);//linkFly

}).then(function () {

name = ‘cnBlog’;

console.log(name);

});

//這段代碼1s後會輸出linkFly,cbBlog

我們先不要太過在意Promise物件的API,後續會講解,我們只需要知道這段代碼完成了和之前同樣的工作。我們的console.log(name)正確的輸出了linkFly,並且我們還神奇的輸出了cnBlog。

或許你覺得這段代碼實在繁瑣,還不如setTimeout來的痛快,那麼我們再來改寫上面的ajax:

var ajax = function (url) {

//我們改寫ajax,讓它以Promise的方式工作

return new Promise(function (resolve) {

$.ajax({

url: url,

success: function (data) {

resolve(data);

}

});

});

};

ajax(‘http://www.cnblogs.com/silin6/map’)

.then(function (key) {

//我們得到key,發起第二條請求

return ajax(‘http://www.cnblogs.com/silin6/source/’ + key);

})

.then(function (data) {

console.log(data);//這時候我們會接收到第二次ajax傳回的資料

});

或許它晦澀難懂,那麼我們嘗試用setTimeout來模擬這次的ajax,這個例子演示了Promise資料的傳遞,一如ajax:

var name,

ajax = function (data) {

return new Promise(function (resolve) {

setTimeout(function () {//我們使用setTimeout模擬ajax

resolve(data);

}, 1000);//1s後執行

});

};

ajax(‘linkFly’).then(function (name) {

return ajax(“i’m ” + name);//模擬第二次ajax

}).then(function (value) {

//2s後,輸出i’m linkFly

console.log(value);

});

上面的代碼,從代碼語意上達到了下麵的流程:

我們僅觀察代碼就知道現在的它變得非常優雅,兩次異步的代碼被完美的抹平。但我們應該時刻謹記,Promise改變的是你異步的代碼和編程思想,而並沒有改變異步代碼的執行——它是一種由卓越的編程思想所衍生的物件。

下麵一張圖演示了普通異步回呼和Promise異步的區別,Promise實現的異步從代碼運行上來說並無太大區別,但從編程思想上來說差異巨大。

ECMAScript 6 Promise

Promise物件代表了未來某個將要發生的事件(通常是一個異步操作),抹平了異步代碼的金字塔,它從模型上解決了異步代碼產生的”回呼金字塔”。

Promise是ECMAScript 6規範內定義的,所以請使用現代瀏覽器測試,它的兼容性可以在這裡查看。

Promise.constructor

Promise是一個物件,它的建構式接收一個回呼函式,這個回呼函式引數有兩個函式:分別在成功狀態下執行和失敗狀態下執行,Promise有三個狀態,分別為:等待態(Pending)、執行態(Fulfilled)和拒絕態(Rejected)。

var p = new Promise(function (resolve,reject) {

console.log(arguments);

//resolve表示成功狀態下執行

//reject表示失敗狀態下執行

});

傳遞的這個回呼函式,等同被Promise重新封裝,並傳遞了兩個引數回呼,這兩個引數用於驅動Promise資料的傳遞。resolve和reject本身承載著觸發器的使命:

  • 預設的Promise物件是等待態(Pending)。
  • 呼叫resolve()表示這個Promise進入執行態(Fulfilled)
  • 呼叫reject()表示這個promise()進入拒絕態(Rejected)
  • Promise物件可以從等待狀態下進入到執行態和拒絕態,並且無法回退。
  • 而執行態和拒絕態不允許互相轉換(例如執行態轉換到拒絕態)。

Promise.prototype.then

生成的promise實體(如上面的變數p)擁有方法then(),then()方法是Promise物件的核心,它傳回一個新的Promise物件,因此可以像jQuery一樣鏈式操作,非常優雅。

Promise是雙鏈的,所以then()方法接受兩個引數,分別表示:

  • 執行態(Fulfilled)下執行的回呼函式
  • 拒絕態(Rejected)下執行的回呼函式。

p.then(function () {

//我們傳回一個promise

return new Promise(function (resolve) {

setTimeout(function () {

resolve(‘resolve’);

}, 1000);//異步1s

});

}, function () {

console.log(‘rejected’);

}) //鏈式回呼

.then(function (state) {

console.log(state);//如果為執行態,輸出resolve

}, function (data) {

console.log(data);//如果為拒絕態,輸出undefined

});;

then()方法的傳回值由它相應狀態下執行的函式決定:這個函式傳回undefined,則then()方法構建一個預設的Promise物件,並且這個物件擁有then()方法所屬的Promise物件的狀態。

var p = new Promise(function (resolve) {

resolve();//直接標誌執行態

}), temp;

temp = p.then(function () {

//傳入執行態函式,不傳回值

});

temp.then(function () {

console.log(‘fulfilled’);//擁有p的狀態

});

console.log(temp === p);//預設構建的promise,但已經和p不是同一個物件,輸出false

如果對應狀態所執行的函式傳回一個全新的Promise物件,則會改寫掉當前Promise,代碼如下:

var p = new Promise(function (resolve) {

resolve();//直接標誌執行態

}), temp;

temp = p.then(function () {

//傳回新的promise物件,和p的狀態無關

return new Promise(function (resolve, reject) {

reject();//標誌拒絕態

});

});

temp.then(function () {

console.log(‘fulfilled’);

}, function () {

console.log(‘rejected’);//輸出

});

即then()方法傳遞的進入的回呼函式,如果傳回promise物件,則then()方法傳回這個promise物件,否則將預設構建一個新的promise物件,並繼承呼叫then()方法的promise的狀態。

我們應該清楚Promise的使命,抹平了異步代碼的回呼金字塔,我們會有很多依賴上一層異步的代碼:

var url = ‘http://www.cnblogs.com/silin6/’;

ajax(url, function (data) {

ajax(url + data, function (data2) {

ajax(url + data2, function (data3) {

ajax(url + data3, function () {

//回呼金字塔

});

});

});

});

使用Promise則抹平了代碼:

promise.then(function (data) {

return ajax(url + data);

}).then(function (data2) {

return ajax(url + data2);

}).then(function (data3) {

return ajax(url + data3);

}).then(function (data) {

//扁平化代碼

});

Promise還有更多更強大的API。但本文的目的旨在讓大家感受到Promise的魅力,而並非講解Promise物件自身的API,關於Promise其他輔助實現API請查閱本文最下方的取用章節,Promise其他API如下:

Promise.prototype.catch():用於指定發生錯誤時的回呼函式(捕獲異常),並具有冒泡性質。

Promise.all(),Promise.race():Promise.all方法用於將多個Promise實體,包裝成一個新的Promise實體。

Promise.resolve(),Promise.reject():將現有物件轉為Promise物件。

希望大家一點點的接受Promise,所以沒有講太多,我們對於Promise的理解不應該僅僅是一個異步模型,我們更關註應該是Promise/Deferred的編程思想,所以後續幾篇會逐漸深入講解Promise的前生今世。

參考和取用

  • ECMAScript 6 入門 – Promise物件
  • Promise/A+規範
  • JavaScript框架設計-第12章 異步處理
  • Promise啟示錄



來自:linkFly

鏈接:http://www.cnblogs.com/silin6/p/4288967.html



赞(0)

分享創造快樂