非同步程式設計
javascript非同步程式設計, web2.0時代比較熱門的程式設計方式，我們平時碼的時候也或多或少用到，最典型的就是異步ajax，發送非同步請求，綁定回調函數，請求響應之後調用指定的回調函數，沒有阻塞其他程式碼的執行。還有像setTimeout方法同樣也是非同步執行回呼的方法。
如果對非同步程式設計還不太熟悉的話，直接戳 阮一峰大牛的教學 ，這篇文章介紹了四種非同步程式設計的方式：
這幾種方式的可維護性逐級遞增，理解難度也逐級遞增。這篇總結也是針對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物件的建構子的結構：
檢定：
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);
}
},
這其中比較難理解的就是第五，六步。
以上就是本文的全部內容，希望對大家的學習有所幫助。
