摘要：異常一旦得到處理，返回的后續(xù)對(duì)象將恢復(fù)正常，并會(huì)被執(zhí)行成功的回調(diào)函數(shù)處理。另外，需要注意多級(jí)的回調(diào)函數(shù)是交替執(zhí)行的，這正是由回調(diào)的異步性決定的。

var p = new Promise(function(resolve, reject){
  console.log("create a promise");
  resolve("success");
});

console.log("after new Promise");

p.then(function(value){
  console.log(value);
});

控制臺(tái)輸出：

"create a promise"
"after new Promise"
"success"

Promise對(duì)象表示未來某個(gè)將要發(fā)生的事件，但在創(chuàng)建（new）Promise時(shí)，作為Promise參數(shù)傳入的函數(shù)是會(huì)被立即執(zhí)行的，只是其中執(zhí)行的代碼可以是異步代碼。有些同學(xué)會(huì)認(rèn)為，當(dāng)Promise對(duì)象調(diào)用then方法時(shí)，Promise接收的函數(shù)才會(huì)執(zhí)行，這是錯(cuò)誤的。因此，代碼中"create a promise"先于"after new Promise"輸出。

var p1 = new Promise(function(resolve,reject){
  resolve(1);
});
var p2 = new Promise(function(resolve,reject){
  setTimeout(function(){
    resolve(2);  
  }, 500);      
});
var p3 = new Promise(function(resolve,reject){
  setTimeout(function(){
    reject(3);  
  }, 500);      
});

console.log(p1);
console.log(p2);
console.log(p3);
setTimeout(function(){
  console.log(p2);
}, 1000);
setTimeout(function(){
  console.log(p3);
}, 1000);

p1.then(function(value){
  console.log(value);
});
p2.then(function(value){
  console.log(value);
});
p3.catch(function(err){
  console.log(err);
});

控制臺(tái)輸出：

Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 1}
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
1
2
3
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 2}
Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: 3}

Promise的內(nèi)部實(shí)現(xiàn)是一個(gè)狀態(tài)機(jī)。Promise有三種狀態(tài)：pending，resolved，rejected。當(dāng)Promise剛創(chuàng)建完成時(shí)，處于pending狀態(tài)；當(dāng)Promise中的函數(shù)參數(shù)執(zhí)行了resolve后，Promise由pending狀態(tài)變成resolved狀態(tài)；如果在Promise的函數(shù)參數(shù)中執(zhí)行的不是resolve方法，而是reject方法，那么Promise會(huì)由pending狀態(tài)變成rejected狀態(tài)。

p2、p3剛創(chuàng)建完成時(shí)，控制臺(tái)輸出的這兩臺(tái)Promise都處于pending狀態(tài)，但為什么p1是resolved狀態(tài)呢？ 這是因?yàn)閜1 的函數(shù)參數(shù)中執(zhí)行的是一段同步代碼，Promise剛創(chuàng)建完成，resolve方法就已經(jīng)被調(diào)用了，因而緊跟著的輸出顯示p1是resolved狀態(tài)。我們通過兩個(gè)setTimeout函數(shù)，延遲1s后再次輸出p2、p3的狀態(tài)，此時(shí)p2、p3已經(jīng)執(zhí)行完成，狀態(tài)分別變成resolved和rejected。

var p1 = new Promise(function(resolve, reject){
  resolve("success1");
  resolve("success2");
});

var p2 = new Promise(function(resolve, reject){
  resolve("success");
  reject("reject");
});

p1.then(function(value){
  console.log(value);
});

p2.then(function(value){
  console.log(value);
});

控制臺(tái)輸出：

"success1"
"success"

Promise狀態(tài)的一旦變成resolved或rejected時(shí)，Promise的狀態(tài)和值就固定下來了，不論你后續(xù)再怎么調(diào)用resolve或reject方法，都不能改變它的狀態(tài)和值。因此，p1中resolve("success2")并不能將p1的值更改為success2，p2中reject("reject")也不能將p2的狀態(tài)由resolved改變?yōu)閞ejected.

var p = new Promise(function(resolve, reject){
  resolve(1);
});
p.then(function(value){               //第一個(gè)then
  console.log(value);
  return value*2;
}).then(function(value){              //第二個(gè)then
  console.log(value);
}).then(function(value){              //第三個(gè)then
  console.log(value);
  return Promise.resolve("resolve"); 
}).then(function(value){              //第四個(gè)then
  console.log(value);
  return Promise.reject("reject");
}).then(function(value){              //第五個(gè)then
  console.log("resolve: "+ value);
}, function(err){
  console.log("reject: " + err);
})

控制臺(tái)輸出：

1
2
undefined
"resolve"
"reject: reject"

Promise對(duì)象的then方法返回一個(gè)新的Promise對(duì)象，因此可以通過鏈?zhǔn)秸{(diào)用then方法。then方法接收兩個(gè)函數(shù)作為參數(shù)，第一個(gè)參數(shù)是Promise執(zhí)行成功時(shí)的回調(diào)，第二個(gè)參數(shù)是Promise執(zhí)行失敗時(shí)的回調(diào)。兩個(gè)函數(shù)只會(huì)有一個(gè)被調(diào)用，函數(shù)的返回值將被用作創(chuàng)建then返回的Promise對(duì)象。這兩個(gè)參數(shù)的返回值可以是以下三種情況中的一種：

return 一個(gè)同步的值 ，或者 undefined（當(dāng)沒有返回一個(gè)有效值時(shí)，默認(rèn)返回undefined），then方法將返回一個(gè)resolved狀態(tài)的Promise對(duì)象，Promise對(duì)象的值就是這個(gè)返回值。

return 另一個(gè) Promise，then方法將根據(jù)這個(gè)Promise的狀態(tài)和值創(chuàng)建一個(gè)新的Promise對(duì)象返回。

throw 一個(gè)同步異常，then方法將返回一個(gè)rejected狀態(tài)的Promise, 值是該異常。

根據(jù)以上分析，代碼中第一個(gè)then會(huì)返回一個(gè)值為2（1*2），狀態(tài)為resolved的Promise對(duì)象，于是第二個(gè)then輸出的值是2。第二個(gè)then中沒有返回值，因此將返回默認(rèn)的undefined，于是在第三個(gè)then中輸出undefined。第三個(gè)then和第四個(gè)then中分別返回一個(gè)狀態(tài)是resolved的Promise和一個(gè)狀態(tài)是rejected的Promise，依次由第四個(gè)then中成功的回調(diào)函數(shù)和第五個(gè)then中失敗的回調(diào)函數(shù)處理。

var p = new Promise(function(resolve, reject){
  resolve("success");
});

p.then(function(value){
  console.log(value);
});

console.log("which one is called first ?");

控制臺(tái)輸出：

"which one is called first ?"
"success"

Promise接收的函數(shù)參數(shù)是同步執(zhí)行的，但then方法中的回調(diào)函數(shù)執(zhí)行則是異步的，因此，"success"會(huì)在后面輸出。

var p1 = new Promise( function(resolve,reject){
  foo.bar();
  resolve( 1 );      
});

p1.then(
  function(value){
    console.log("p1 then value: " + value);
  },
  function(err){
    console.log("p1 then err: " + err);
  }
).then(
  function(value){
    console.log("p1 then then value: "+value);
  },
  function(err){
    console.log("p1 then then err: " + err);
  }
);

var p2 = new Promise(function(resolve,reject){
  resolve( 2 );    
});

p2.then(
  function(value){
    console.log("p2 then value: " + value);
    foo.bar();
  }, 
  function(err){
    console.log("p2 then err: " + err);
  }
).then(
  function(value){
    console.log("p2 then then value: " + value);
  },
  function(err){
    console.log("p2 then then err: " + err);
    return 1;
  }
).then(
  function(value){
    console.log("p2 then then then value: " + value);
  },
  function(err){
    console.log("p2 then then then err: " + err);
  }
);

控制臺(tái)輸出：

p1 then err: ReferenceError: foo is not defined
p2 then value: 2
p1 then then value: undefined
p2 then then err: ReferenceError: foo is not defined
p2 then then then value: 1

Promise中的異常由then參數(shù)中第二個(gè)回調(diào)函數(shù)（Promise執(zhí)行失敗的回調(diào)）處理，異常信息將作為Promise的值。異常一旦得到處理，then返回的后續(xù)Promise對(duì)象將恢復(fù)正常，并會(huì)被Promise執(zhí)行成功的回調(diào)函數(shù)處理。另外，需要注意p1、p2 多級(jí)then的回調(diào)函數(shù)是交替執(zhí)行的 ，這正是由Promise then回調(diào)的異步性決定的。

var p1 = Promise.resolve( 1 );
var p2 = Promise.resolve( p1 );
var p3 = new Promise(function(resolve, reject){
  resolve(1);
});
var p4 = new Promise(function(resolve, reject){
  resolve(p1);
});

console.log(p1 === p2); 
console.log(p1 === p3);
console.log(p1 === p4);
console.log(p3 === p4);

p4.then(function(value){
  console.log("p4=" + value);
});

p2.then(function(value){
  console.log("p2=" + value);
})

p1.then(function(value){
  console.log("p1=" + value);
})

控制臺(tái)輸出：

true
false
false
false
p2=1
p1=1
p4=1

Promise.resolve(...)可以接收一個(gè)值或者是一個(gè)Promise對(duì)象作為參數(shù)。當(dāng)參數(shù)是普通值時(shí)，它返回一個(gè)resolved狀態(tài)的Promise對(duì)象，對(duì)象的值就是這個(gè)參數(shù)；當(dāng)參數(shù)是一個(gè)Promise對(duì)象時(shí)，它直接返回這個(gè)Promise參數(shù)。因此，p1 === p2。但通過new的方式創(chuàng)建的Promise對(duì)象都是一個(gè)新的對(duì)象，因此后面的三個(gè)比較結(jié)果都是false。另外，為什么p4的then最先調(diào)用，但在控制臺(tái)上是最后輸出結(jié)果的呢？因?yàn)閜4的resolve中接收的參數(shù)是一個(gè)Promise對(duì)象p1，resolve會(huì)對(duì)p1”拆箱“，獲取p1的狀態(tài)和值，但這個(gè)過程是異步的，可參考下一節(jié)。

var p1 = new Promise(function(resolve, reject){
  resolve(Promise.resolve("resolve"));
});

var p2 = new Promise(function(resolve, reject){
  resolve(Promise.reject("reject"));
});

var p3 = new Promise(function(resolve, reject){
  reject(Promise.resolve("resolve"));
});

p1.then(
  function fulfilled(value){
    console.log("fulfilled: " + value);
  }, 
  function rejected(err){
    console.log("rejected: " + err);
  }
);

p2.then(
  function fulfilled(value){
    console.log("fulfilled: " + value);
  }, 
  function rejected(err){
    console.log("rejected: " + err);
  }
);

p3.then(
  function fulfilled(value){
    console.log("fulfilled: " + value);
  }, 
  function rejected(err){
    console.log("rejected: " + err);
  }
);

控制臺(tái)輸出：

p3 rejected: [object Promise]
p1 fulfilled: resolve
p2 rejected: reject

Promise回調(diào)函數(shù)中的第一個(gè)參數(shù)resolve，會(huì)對(duì)Promise執(zhí)行"拆箱"動(dòng)作。即當(dāng)resolve的參數(shù)是一個(gè)Promise對(duì)象時(shí)，resolve會(huì)"拆箱"獲取這個(gè)Promise對(duì)象的狀態(tài)和值，但這個(gè)過程是異步的。p1"拆箱"后，獲取到Promise對(duì)象的狀態(tài)是resolved，因此fulfilled回調(diào)被執(zhí)行；p2"拆箱"后，獲取到Promise對(duì)象的狀態(tài)是rejected，因此rejected回調(diào)被執(zhí)行。但Promise回調(diào)函數(shù)中的第二個(gè)參數(shù)reject不具備”拆箱“的能力，reject的參數(shù)會(huì)直接傳遞給then方法中的rejected回調(diào)。因此，即使p3 reject接收了一個(gè)resolved狀態(tài)的Promise，then方法中被調(diào)用的依然是rejected，并且參數(shù)就是reject接收到的Promise對(duì)象。

歡迎關(guān)注我的公眾號(hào)：老干部的大前端，領(lǐng)取21本大前端精選書籍！