ES6 Promise 對(duì)象
一、概述
是異步編程的一種解決方案。
從語(yǔ)法上說(shuō)，Promise 是一個(gè)對(duì)象，從它可以獲取異步操作的消息。
Promise 狀態(tài)
狀態(tài)的特點(diǎn)
Promise 異步操作有三種狀態(tài)：pending（進(jìn)行中）、fulfilled（已成功）和 rejected（已失敗）。除了異步操作的結(jié)果，任何其他操作都無(wú)法改變這個(gè)狀態(tài)。

Promise 對(duì)象只有：從 pending 變?yōu)?fulfilled 和從 pending 變?yōu)?rejected 的狀態(tài)改變。只要處于 fulfilled 和 rejected ，狀態(tài)就不會(huì)再變了即 resolved（已定型）。

const p1 = new Promise(function(resolve,reject){
resolve(‘success1’);
resolve(‘success2’);
});
const p2 = new Promise(function(resolve,reject){
resolve(‘success3’);
reject(‘reject’);
});
p1.then(function(value){
console.log(value); // success1
});
p2.then(function(value){
console.log(value); // success3
});

狀態(tài)的缺點(diǎn)
無(wú)法取消 Promise ，一旦新建它就會(huì)立即執(zhí)行，無(wú)法中途取消。

如果不設(shè)置回調(diào)函數(shù)，Promise 內(nèi)部拋出的錯(cuò)誤，不會(huì)反應(yīng)到外部。

當(dāng)處于 pending 狀態(tài)時(shí)，無(wú)法得知目前進(jìn)展到哪一個(gè)階段（剛剛開始還是即將完成）。
二、基本用法
ES6 規(guī)定，Promise對(duì)象是一個(gè)構(gòu)造函數(shù)，用來(lái)生成Promise實(shí)例。

下面代碼創(chuàng)造了一個(gè)Promise實(shí)例。

const promise = new Promise(function(resolve, reject) {
// … some code
if (/ 異步操作成功 /){
resolve(value);
} else {
reject(error);
}
});

Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject。它們是兩個(gè)函數(shù)，由 JavaScript 引擎提供，不用自己部署。

resolve函數(shù)的作用是，將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤俺晒Α?#xff08;即從 pending 變?yōu)?resolved），在異步操作成功時(shí)調(diào)用，并將異步操作的結(jié)果，作為參數(shù)傳遞出去；reject函數(shù)的作用是，將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤笆　?#xff08;即從 pending 變?yōu)?rejected），在異步操作失敗時(shí)調(diào)用，并將異步操作報(bào)出的錯(cuò)誤，作為參數(shù)傳遞出去。
Promise實(shí)例生成以后，可以用then方法分別指定resolved狀態(tài)和rejected狀態(tài)的回調(diào)函數(shù)。

promise.then(function(value) {
// success
}, function(error) {
// failure
});

then方法可以接受兩個(gè)回調(diào)函數(shù)作為參數(shù)。第一個(gè)回調(diào)函數(shù)是Promise對(duì)象的狀態(tài)變?yōu)閞esolved時(shí)調(diào)用，第二個(gè)回調(diào)函數(shù)是Promise對(duì)象的狀態(tài)變?yōu)閞ejected時(shí)調(diào)用。這兩個(gè)函數(shù)都是可選的，不一定要提供。它們都接受Promise對(duì)象傳出的值作為參數(shù)。
下面是一個(gè)Promise對(duì)象的簡(jiǎn)單例子。

 <button @click="addReturnPromise">練習(xí)方法返回一個(gè)Promise實(shí)例</button>

 timeout(ms){return new Promise((resolve, reject) => {setTimeout(resolve, ms, "done");});},addReturnPromise() {this.timeout(1000).then((value) => {console.log(value);})},

timeout方法返回一個(gè)Promise實(shí)例，表示一段時(shí)間以后才會(huì)發(fā)生的結(jié)果。過(guò)了指定的時(shí)間（ms參數(shù)）以后，Promise實(shí)例的狀態(tài)變?yōu)閞esolved，就會(huì)觸發(fā)then方法綁定的回調(diào)函數(shù)。
Promise 新建后就會(huì)立即執(zhí)行。

<button @click="addPromiseSort">練習(xí)執(zhí)行順序相關(guān)</button>

 addPromiseSort() {let promise = new Promise(function (resolve, reject) {console.log("Promise");resolve();});promise.then(function () {console.log("resolved.");});console.log("Hi!");},

上面代碼中，Promise 新建后立即執(zhí)行，所以首先輸出的是Promise。然后，then方法指定的回調(diào)函數(shù)，將在當(dāng)前腳本所有同步任務(wù)執(zhí)行完才會(huì)執(zhí)行，所以resolved最后輸出。
下面是一個(gè)用Promise對(duì)象實(shí)現(xiàn)的 Ajax 操作的例子。

const getJSON = function(url) {
const promise = new Promise(function(resolve, reject){
const handler = function() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open(“GET”, url);
client.onreadystatechange = handler;
client.responseType = “json”;
client.setRequestHeader(“Accept”, “application/json”);
client.send();
});
return promise;
};
getJSON(“/posts.json”).then(function(json) {
console.log('Contents: ’ + json);
}, function(error) {
console.error(‘出錯(cuò)了’, error);
});

如果調(diào)用resolve函數(shù)和reject函數(shù)時(shí)帶有參數(shù)，那么它們的參數(shù)會(huì)被傳遞給回調(diào)函數(shù)。reject函數(shù)的參數(shù)通常是Error對(duì)象的實(shí)例，表示拋出的錯(cuò)誤；resolve函數(shù)的參數(shù)除了正常的值以外，還可能是另一個(gè) Promise 實(shí)例，比如像下面這樣。

<button @click="addPPromise">練習(xí)resolve函數(shù)的參數(shù)除了正常的值以外，還可能是另一個(gè) Promise 實(shí)例</button>

 addPPromise() {var p1 = new Promise(function (resolve, reject) {// resolve("11");reject("xx");});var p2 = new Promise(function (resolve, reject) {resolve(p1);});console.log(p2);},

addPPromise() {var p1 = new Promise(function (resolve, reject) {resolve("11");// reject("xx");});var p2 = new Promise(function (resolve, reject) {resolve(p1);});console.log(p2);},

注意，這時(shí)p1的狀態(tài)就會(huì)傳遞給p2，也就是說(shuō)，p1的狀態(tài)決定了p2的狀態(tài)。如果p1的狀態(tài)是pending，那么p2的回調(diào)函數(shù)就會(huì)等待p1的狀態(tài)改變；如果p1的狀態(tài)已經(jīng)是resolved或者rejected，那么p2的回調(diào)函數(shù)將會(huì)立刻執(zhí)行。

const p1 = new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error(‘fail’)), 3000)
})
const p2 = new Promise(function (resolve, reject) {
setTimeout(() => resolve(p1), 1000)
})
p2
.then(result => console.log(result))
.catch(error => console.log(error))
// Error: fail

上面代碼中，p1是一個(gè) Promise，3 秒之后變?yōu)閞ejected。p2的狀態(tài)在 1 秒之后改變，resolve方法返回的是p1。由于p2返回的是另一個(gè) Promise，導(dǎo)致p2自己的狀態(tài)無(wú)效了，由p1的狀態(tài)決定p2的狀態(tài)。所以，后面的then語(yǔ)句都變成針對(duì)后者（p1）。又過(guò)了 2 秒，p1變?yōu)閞ejected，導(dǎo)致觸發(fā)catch方法指定的回調(diào)函數(shù)。
注意，調(diào)用resolve或reject并不會(huì)終結(jié) Promise 的參數(shù)函數(shù)的執(zhí)行。
new Promise((resolve, reject) => {
resolve(1);
console.log(2);
}).then(r => {
console.log?;
});
// 2
// 1
上面代碼中，調(diào)用resolve(1)以后，后面的console.log(2)還是會(huì)執(zhí)行，并且會(huì)首先打印出來(lái)。這是因?yàn)榱⒓?resolved 的 Promise 是在本輪事件循環(huán)的末尾執(zhí)行，總是晚于本輪循環(huán)的同步任務(wù)。

一般來(lái)說(shuō)，調(diào)用resolve或reject以后，Promise 的使命就完成了，后繼操作應(yīng)該放到then方法里面，而不應(yīng)該直接寫在resolve或reject的后面。所以，最好在它們前面加上return語(yǔ)句，這樣就不會(huì)有意外。
new Promise((resolve, reject) => {
return resolve(1);
// 后面的語(yǔ)句不會(huì)執(zhí)行
console.log(2);
})

三、Promise.all方法，Promise.race方法
Promise.all 方法用于將多個(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例。
var p = Promise.all([p1,p2,p3]);
Promise.all 方法接受一個(gè)數(shù)組作為參數(shù)，p1、p2 都是 Promise 對(duì)象的實(shí)例。（Promise.all 方法的參數(shù)不一定是數(shù)組，但是必須具有 iterator 接口，且返回的每個(gè)成員都是 Promise 實(shí)例。）

p 的狀態(tài)由 p1、p2 決定，分成兩種情況。

（1）只有p1、p2、p3的狀態(tài)都變成fulfilled，p的狀態(tài)才會(huì)變成fulfilled，此時(shí)p1、p2、p3的返回值組成一個(gè)數(shù)組，傳遞給p的回調(diào)函數(shù)。
（2）只要p1、p2、p3之中有一個(gè)被rejected，p的狀態(tài)就變成rejected，此時(shí)第一個(gè)被reject的實(shí)例的返回值，會(huì)傳遞給p的回調(diào)函數(shù)。

 <button @click="addPromiseAll">練習(xí)Promise.all</button>

   addPromiseAll() {console.log("addPromiseAll");var p1 = new Promise(function (resolve, reject) {resolve("66");// reject("44");});var p2 = new Promise(function (resolve, reject) {resolve("55");});var p = Promise.all([p1, p2]);console.log(p);p.then(function (value) {console.log("value", value);}).catch(function (reason) {console.log("reason", reason);});},

  <button @click="addPromiseAll">練習(xí)Promise.all</button>

 addPromiseAll() {console.log("addPromiseAll");var p1 = new Promise(function (resolve, reject) {// resolve("66");reject("44");});var p2 = new Promise(function (resolve, reject) {resolve("55");});var p = Promise.all([p1, p2]);console.log(p);p.then(function (value) {console.log("value", value);}).catch(function (reason) {console.log("reason", reason);});},

Promise.race 方法同樣是將多個(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例。

var p = Promise.race([p1,p2,p3]);
只要p1、p2、p3之中有一個(gè)實(shí)例率先改變狀態(tài)，p的狀態(tài)就跟著改變。那個(gè)率先改變的Promise實(shí)例的返回值，就傳遞給p的返回值。

如果Promise.all方法和Promise.race方法的參數(shù)，不是Promise實(shí)例，就會(huì)先調(diào)用下面講到的Promise.resolve方法，將參數(shù)轉(zhuǎn)為Promise實(shí)例，再進(jìn)一步處理。

  <button @click="addPromiseRace">練習(xí)Promise.race</button>

 addPromiseRace() {var p1 = new Promise(function (resolve, reject) {resolve("11");// reject("xx");});var p2 = new Promise(function (resolve, reject) {resolve("22");});var p3 = new Promise(function (resolve, reject) {resolve("33");});var p = Promise.race([p1, p2]);console.log(p);p.then(function (value) {console.log("value", value);}).catch(function (reason) {console.log("reason", reason);});},

  <button @click="addPromiseRace">練習(xí)Promise.race</button>

 addPromiseRace() {var p1 = new Promise(function (resolve, reject) {// resolve("11");reject("xx");});var p2 = new Promise(function (resolve, reject) {resolve("22");});var p3 = new Promise(function (resolve, reject) {resolve("33");});var p = Promise.race([p1, p2]);console.log(p);p.then(function (value) {console.log("value", value);}).catch(function (reason) {console.log("reason", reason);});},