簡單實現(xiàn)異步編程promise模式
異步編程
javascript異步編程, web2.0時代比較熱門的編程方式,我們平時碼的時候也或多或少用到,最典型的就是異步ajax,發(fā)送異步請求,綁定回調(diào)函數(shù),請求響應(yīng)之后調(diào)用指定的回調(diào)函數(shù),沒有阻塞其他代碼的執(zhí)行。還有像setTimeout方法同樣也是異步執(zhí)行回調(diào)的方法。
如果對異步編程還不太熟悉的話,直接戳 阮一峰大牛的教程 ,這篇文章介紹了四種異步編程的方式:
- 回調(diào)函數(shù)
- 事件監(jiān)聽
- 發(fā)布/訂閱
- promise模式
這幾種方式的可維護性逐級遞增,理解難度也逐級遞增。這篇總結(jié)也是針對promise模式的。
promise模式
那么多中異步編程的方式,為什么選擇promise, 因為前面幾種方式不夠靈活,用起來不夠痛快,不優(yōu)雅。為了降低異步編程的復(fù)雜性,所以promise。
promise的核心是有一個promise對象,這個對象有一個重要的then()方法, 它用于指定回調(diào)函數(shù),如:
f1().then(f2);
promise模式在任何時刻都有三種狀態(tài):已完成(resolved),未完成(unfulfilled),那么then()方法就是為狀態(tài)變化指定不同的回調(diào)函數(shù),并總是返回一個promise對象,方便鏈式調(diào)用。
那promise模式下,返回的數(shù)據(jù)如何在各個回調(diào)函數(shù)之間傳播呢,通過resolve方法,你可以將一個函數(shù)的返回值作為參數(shù)傳遞給另一個函數(shù),并且將另一個函數(shù)的返回值作為參數(shù)再傳遞給下一個函數(shù)……像一條“鏈”一樣無限的這么做下去。
代碼實現(xiàn)
通過創(chuàng)建一個Promise構(gòu)造函數(shù)來實現(xiàn)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('數(shù)據(jù)1'); }, 1000); return promise; }; var callback1 = function(re) { re = re + '數(shù)據(jù)2'; console.log(re); }; delay1().then(callback1)
代碼分析
我們可看到一個簡單的promise對象的構(gòu)造函數(shù)的結(jié)構(gòu):
- callbacks: 用于管理回調(diào)函數(shù)
- resolve: 請求成功時執(zhí)行的方法
- reject:請求失敗時執(zhí)行的方法
- complete: 執(zhí)行回調(diào)
- then:綁定回調(diào)函數(shù)
測試:
var promise = new Promise(); var delay1 = function() { setTimeout(function() { promise.resolve('數(shù)據(jù)1'); }, 1000); return promise; }; var callback1 = function(re) { re = re + '數(shù)據(jù)2'; console.log(re); promise.resolve(re); }; var callback2 = function(re) { console.log(re + '數(shù)據(jù)3'); }; delay1().then(callback1).then(callback2);
結(jié)果:
一秒之后輸出:
分析:
//第一步 var delay1 = function() { setTimeout(function() { promise.resolve('數(shù)據(jù)1'); }, 1000); return promise; };
這個函數(shù)通過setTimeout方法,異步傳遞一個數(shù)據(jù)1,并返回一個promise對象(必須)。
//第二步 var callback1 = function(re) { re = re + '數(shù)據(jù)2'; console.log(re); promise.resolve(re); };
callback1和callback2都是要通過then方法注冊的回調(diào)函數(shù),其中callback1通過resolve方法把數(shù)據(jù)往下傳遞。
//第三步 delay1().then(callback1).then(callback2);
delay1()方法執(zhí)行完,因為返回了一個promise對象,所以可以再調(diào)用then()方法為delay1()的setTimeout異步執(zhí)行操作指定回調(diào)函數(shù), 又因為then()方法也返回的是promise對象,所以還可以再調(diào)用then方法
//第四步 setTimeout(function() { promise.resolve('數(shù)據(jù)1'); }, 1000);
一秒之后,當其他代碼執(zhí)行完成,開始執(zhí)行異步代碼promise.resolve('數(shù)據(jù)1');,這里調(diào)用promise的resolve()方法,指定了一個成功狀態(tài),并把數(shù)據(jù)1作為參數(shù)。
//第五步 resolve: function(result) { this.complete("resolve", result); }, //第六步:循環(huán)執(zhí)行回調(diào),將上一個回調(diào)的結(jié)果傳遞給下一個回調(diào) complete: function(type, result) { while (this.callbacks[0]) { this.callbacks.shift()[type](result); } },
這其中比較難理解的就是第五,六步。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助。
- javascript使用Promise對象實現(xiàn)異步編程
- 有關(guān)Promises異步問題詳解
- 異步JavaScript編程中的Promise使用方法
- NodeJS中利用Promise來封裝異步函數(shù)
- javascript異步編程代碼書寫規(guī)范Promise學習筆記
- JavaScript異步回調(diào)的Promise模式封裝實例
- Javascript中的異步編程規(guī)范Promises/A詳細介紹
- Javascript異步編程模型Promise模式詳細介紹
- JavaScript異步編程Promise模式的6個特性
- 使用Promise解決多層異步調(diào)用的簡單學習心得
相關(guān)文章
JavaScript中__proto__與prototype的關(guān)系深入理解
本文將討論下對象的內(nèi)部原型(__proto__)和構(gòu)造器的原型(prototype)的關(guān)系,需要了解更多的朋友可以參考下2012-12-12談?wù)勱P(guān)于JavaScript 中的 MVC 模式
本文介紹了模型-視圖-控制器模式在 JavaScript 中的實現(xiàn),有需要的朋友可以參考一下2013-04-04