轉載自：http://www.lht.ren/article/3/
Promise是什麼呢？根據ecma-262的定義：

Promise是一個被用於延時計算的最終結果的佔位符

（A Promise is an object that is used as a placeholder for the eventual results of a deferred (and possibly asynchronous) computation.）

這個怎麼理解呢

比如說，我要去麥當勞買點吃的，下單以後人家會先給你一個訂單號，等人家外賣做好了，會提示你，並用那個訂單小票來換取你真正的食物，在這時候，那個訂單小票就是你這頓飯的佔位符。

回到Promise，它有三種狀態，分別為完成，拒絕和待決議，

而待決議的狀態代表它還沒有被完成或者是拒絕，也就是說，如果它一直都是處於待決議的狀態，意味著程式碼永遠都不會繼續往下執行

所以下面這段程式碼永遠都執行不到finish

new Promise((resolve, reject) => {
console.log(‘waiting’);
document.writeln(‘waiting’);
}).then((msg) => {
console.log(‘finish’);
});
也就是意味著，必須顯示的執行resolve()或者是reject，程式才會繼續往下執行。

那怎麼解決這個問題呢，其實很簡單，決議一下就好了嘛，哈哈~~

或者給Promise設定一個超時時間，看下面的程式碼：

function timeoutPromise(delay) {
return new Promise( function(resolve,reject){
setTimeout( function(){
reject( “Timeout!” );
}, delay );
} );
}
Promise.race([
new Promise(() => {
console.log(‘waiting…’);
}),
timeoutPromise(3000)
]).catch((msg) => {
console.log(msg);
})
這段程式碼呢，會先等待5秒，然後會打印出一個錯誤"Timeout"，在這裡，Promise.race()實際上就是競態的，誰先決議，其餘的就會被拋棄。所以咱們三秒鐘後決議一個拒絕，剩下那個promise自動被拋棄了

說到錯誤處理了，思考下面的程式碼：

new Promise((resolve, reject) => {
foo.bar();
}).then((msg) => {
console.log(msg);
}, null).then((msg) => {
console.log(msg);
}, (err) => {
console.log(err);
});
這段程式碼，很明顯foo不是物件，所以會報ReferenceError，所以呢，會自動決議為reject，然後他緊接著的那個then沒有拒絕處理回撥，然後接著往下傳遞錯誤，直到有reject回撥為止，假如一直都沒有reject回撥呢，他就會在全域性丟擲一個未捕獲的異常。

那麼如果在Promise決議多次呢，實際上只有第一次決議生效，也就是說，只能有一種決議生效，又成功又失敗，或者成功多次，失敗多次聽著就不靠譜是吧，思考下面的程式碼

new Promise((resolve, reject) => {
resolve();
reject();
console.log(‘exec finish’);
}).then((msg) => {
console.log(‘resolve’);
}, (err) => {
console.log(‘reject’);
});
執行結果是輸出exec finish 和resolve，因為第一次決議為resolve, 所以reject決議就被拋棄了

大家想一下，決議後對應的then裡面的回撥函式是同步還是非同步的呢，思考下面這個問題：

console.log(0);
let p = new Promise((resolve, reject) => {
console.log(1);
resolve();
console.log(2);
})
console.log(3);
p.then((msg) => {
console.log(4);
});
console.log(5);
他的結果是 1 2 3 5 4

答案很顯然啦，是非同步的！實際上當決議以後，就會把它放到一個非同步佇列裡呼叫

那為什麼要這麼設計呢，會給我們帶來什麼好處呢，思考下面這個問題

function getResult() {
console.log(a);
}
function opt() {
if (isAsync) {
setTimeout(() => {
getResult();
}, 0);
} else {
getResult();
}
}
var a = 0;
var isAsync = false;
opt();
a++;
isAsync = true;
opt();
a++;
他的結果輸出的是0 2，那為什麼不是0, 1,實際上就是因為由於同步和非同步的的不確定性導致的，也叫zalgo，所以呢，要想消除他們的不確定性，必須就讓他裡面的程式碼要麼都是同步，要麼都是非同步，這也是then為什麼是非同步的原因了

關於then，還有一個問題，就是then的返回值是什麼，來繼續看問題

var p = Promise.resolve( 21 );
var p2 = p.then( function(v){
return v * 2;
});
console.log(p2);
通過他的結果，你很容易就能看出來，then的返回值是一個Promise，那麼，這個then回撥是不是可以這麼理解呢？

function callback() {
return Promise.resolve(42);
}
如果是的話，那麼咱們就研究一下Promise.resolve()的特性，然後then()同理就可以是吧

那麼我們現在就研究一下Promise.resolve()的一些特性：

如果向Promise.resolve()傳遞一個非Promise，非thenable的立即值，就會立即得到這個值填充的Promise，這個有三個關鍵字，非Promise，非thenable和立即值

如果向Promise.resolve()傳遞一個真正的promise，那麼就會返回這個Promise，又一個例子，很好理解

var p = Promise.resolve(42);
var p2 = Promise.resolve§;
console.log(p === p2); // true
如果向Promise.resolve()傳遞一個非Promise的thenable值，那麼就會展開這個值，並且在展開過程會持續到提取出一個具體的Promise最終值

大家應該會有一點疑惑，thenable是什麼，這段話是什麼意思

var obj = {
then(resolve, reject) {
resolve(42);
}
};
Promise.resolve(obj).then((msg) => {
console.log(msg); //42
});
好了，Promise.resolve()特性講完了，then返回值同理

同理完了以後呢，就會出現一些比較有意思的用法

首先就是鏈式呼叫，比如說

var p = Promise.resolve( 21 );
var p2 = p.then( function(v){
console.log( v ); // 21
// 用值42填充p2
return v * 2;
} );
// 連線p2
p2.then( function(v){
console.log( v ); // 42
} );
很簡單吧，就不贅述了。

還有一個比較有意思，就是Promise實現同步執行，也就是前一個then如果是非同步的話，它必須操作完成後，才會執行後面的then，常見的寫法是這樣的

new Promise((resolve, reject) => {
setTimeout(() => {
console.log(‘exec in promise it’);
resolve();
}, 1000);
}).then(() => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(‘exec in then it’);
resolve();
}, 1000);
});
});
這個先過一秒輸出第一句話，再過一秒輸出第二句話

這個的原理實際上剛剛Promise.resolve()的第二條，如果返回的是Promise，那麼會直接返回這個Promise，在這裡，直接返回return的這個Promise後，就會等待這個Promise決議，在一秒後決議完，就執行後面的then

最後一個有關then的知識點了：

一個Promise決議後，這個Promise上所有的通過then()註冊的回撥都會在下一個非同步時間節點上依次被立即呼叫，這些回掉中任意一個都無法影響或者延誤對其他回撥的呼叫

var p = new Promise((resolve, reject) => {
resolve();
});
p.then( function(){
p.then( function(){
console.log( “C” );
} );
console.log( “A” );
} );
p.then( function(){
console.log( “B” );
} );
// a b c
這個的重點實際上是這些決議回撥都被加入到了一個佇列中，輸出的順序正好實際上就代表了他們加入佇列後的先後順序

好的，這一章講解完了，如果有什麼想和我討論的，或者有什麼意見和建議，請留言給我（qq:75675231,email:[email protected]）

參考書籍《你不知道的Javascript中卷》在這裡插入程式碼片