建站
咨詢
售后
建站咨詢
新聞中心
1. Promise 的含義
Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強大。它由社區(qū)最早提出和實現(xiàn)，es6 將其寫進了語言標準，統(tǒng)一了用法，原生提供了 Promise 對象。
所謂 Promise ，簡單說就是一個容器，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進行處理。
Promise 對象有以下兩個特點。
（1）對象的狀態(tài)不受外界影響。 Promise 對象代表一個異步操作，有三種狀態(tài)：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。只有異步操作的結(jié)果，可以決定當前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài)。這也是 Promise 這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。
（2）一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結(jié)果。 Promise 對象的狀態(tài)改變，只有兩種可能：從 pending 變?yōu)?fulfilled 和從 pending 變?yōu)?rejected 。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會再變了，會一直保持這個結(jié)果，這時就稱為 resolved（已定型）。如果改變已經(jīng)發(fā)生了，你再對 Promise 對象添加回調(diào)函數(shù)，也會立即得到這個結(jié)果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監(jiān)聽，是得不到結(jié)果的。
注意，為了行文方便，本章后面的 resolved 統(tǒng)一只指 fulfilled 狀態(tài)，不包含 rejected 狀態(tài)。
有了 Promise 對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調(diào)函數(shù)。此外， Promise 對象提供統(tǒng)一的接口，使得控制異步操作更加容易。
Promise 也有一些缺點。首先，無法取消 Promise ，一旦新建它就會立即執(zhí)行，無法中途取消。其次，如果不設(shè)置回調(diào)函數(shù)， Promise 內(nèi)部拋出的錯誤，不會反應(yīng)到外部。第三，當處于 pending 狀態(tài)時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。
如果某些事件不斷地反復(fù)發(fā)生，一般來說，使用 Stream 模式是比部署 Promise 更好的選擇。
2. 基本用法
ES6 規(guī)定，Promise 對象是一個構(gòu)造函數(shù)，用來生成Promise 實例。
下面代碼創(chuàng)造了一個 Promise 實例。
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 異步操作成功 */){
resolve(value);
} else {
reject(error);
}
}); Promise 構(gòu)造函數(shù)接受一個函數(shù)作為參數(shù)，該函數(shù)的兩個參數(shù)分別是resolve 和reject 。它們是兩個函數(shù)，由 JavaScript 引擎提供，不用自己部署。
resolve 函數(shù)的作用是，將 Promise對象的狀態(tài)從“未完成”變?yōu)?code>“成功”（即從 pending 變?yōu)?resolved），在異步操作成功時調(diào)用，并將異步操作的結(jié)果，作為參數(shù)傳遞出去；reject函數(shù)的作用是，將 Promise對象的狀態(tài)從“未完成”變?yōu)?code>“失敗”（即從 pending 變?yōu)?rejected），在異步操作失敗時調(diào)用，并將異步操作報出的錯誤，作為參數(shù)傳遞出去。
Promise 實例生成以后，可以用 then方法分別指定resolved狀態(tài)和 rejected狀態(tài)的回調(diào)函數(shù)。
promise.then(function(value) {
// success
}, function(error) {
// failure
}); then 方法可以接受兩個回調(diào)函數(shù)作為參數(shù)。第一個回調(diào)函數(shù)是Promise對象的狀態(tài)變?yōu)?resolved時調(diào)用，第二個回調(diào)函數(shù)是 Promise對象的狀態(tài)變?yōu)?code>rejected時調(diào)用。其中，第二個函數(shù)是可選的，不一定要提供。這兩個函數(shù)都接受 Promise 對象傳出的值作為參數(shù)。
下面是一個 Promise 對象的簡單例子。
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}
timeout(100).then((value) => {
console.log(value);
});上面代碼中， timeout 方法返回一個 Promise 實例，表示一段時間以后才會發(fā)生的結(jié)果。過了指定的時間（ ms 參數(shù)）以后， Promise 實例的狀態(tài)變?yōu)?resolved ，就會觸發(fā) then 方法綁定的回調(diào)函數(shù)。
Promise 新建后就會立即執(zhí)行。
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('resolved.');
});
console.log('Hi!');
// Promise
// Hi!
// resolved上面代碼中，Promise 新建后立即執(zhí)行，所以首先輸出的是 Promise 。然后， then 方法指定的回調(diào)函數(shù)，將在當前腳本所有同步任務(wù)執(zhí)行完才會執(zhí)行，所以 resolved 最后輸出。
下面是異步加載圖片的例子。
function loadImageAsync(url) {
return new Promise(function(resolve, reject) {
const image = new Image();
image.onload = function() {
resolve(image);
};
image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
image.src = url;
});
}上面代碼中，使用 Promise 包裝了一個圖片加載的異步操作。如果加載成功，就調(diào)用 resolve 方法，否則就調(diào)用 reject 方法。
下面是一個用 Promise 對象實現(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('出錯了', error);
});上面代碼中， getJSON 是對 XMLHttpRequest 對象的封裝，用于發(fā)出一個針對 JSON 數(shù)據(jù)的 HTTP 請求，并且返回一個 Promise 對象。需要注意的是，在 getJSON 內(nèi)部， resolve 函數(shù)和 reject 函數(shù)調(diào)用時，都帶有參數(shù)。
如果調(diào)用 resolve 函數(shù)和reject函數(shù)時帶有參數(shù)，那么它們的參數(shù)會被傳遞給回調(diào)函數(shù)。 reject 函數(shù)的參數(shù)通常是Error對象的實例，表示拋出的錯誤；resolve函數(shù)的參數(shù)除了正常的值以外，還可能是另一個Promise實例，比如像下面這樣。
const p1 = new Promise(function (resolve, reject) {
// ...
});
const p2 = new Promise(function (resolve, reject) {
// ...
resolve(p1);
})上面代碼中， p1 和 p2 都是 Promise 的實例，但是 p2 的 resolve 方法將 p1 作為參數(shù)，即一個異步操作的結(jié)果是返回另一個異步操作。
注意，這時 p1 的狀態(tài)就會傳遞給 p2 ，也就是說， p1 的狀態(tài)決定了 p2 的狀態(tài)。如果 p1 的狀態(tài)是 pending ，那么 p2 的回調(diào)函數(shù)就會等待 p1 的狀態(tài)改變；如果 p1 的狀態(tài)已經(jīng)是 resolved 或者 rejected ，那么 p2 的回調(diào)函數(shù)將會立刻執(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 是一個 Promise，3 秒之后變?yōu)?rejected 。 p2 的狀態(tài)在 1 秒之后改變， resolve 方法返回的是 p1 。由于 p2 返回的是另一個 Promise，導(dǎo)致 p2 自己的狀態(tài)無效了，由 p1 的狀態(tài)決定 p2 的狀態(tài)。所以，后面的 then 語句都變成針對后者（ p1 ）。又過了 2 秒， p1 變?yōu)?rejected ，導(dǎo)致觸發(fā) catch 方法指定的回調(diào)函數(shù)。
注意，調(diào)用 resolve 或 reject 并不會終結(jié) Promise 的參數(shù)函數(shù)的執(zhí)行。
new Promise((resolve, reject) => {
resolve(1);
console.log(2);
}).then(r => {
console.log(r);
});
// 2
// 1上面代碼中，調(diào)用 resolve(1) 以后，后面的 console.log(2) 還是會執(zhí)行，并且會首先打印出來。這是因為立即 resolved 的 Promise 是在本輪事件循環(huán)的末尾執(zhí)行，總是晚于本輪循環(huán)的同步任務(wù)。
一般來說，調(diào)用 resolve 或 reject 以后，Promise 的使命就完成了，后繼操作應(yīng)該放到 then 方法里面，而不應(yīng)該直接寫在 resolve 或 reject 的后面。所以，最好在它們前面加上 return 語句，這樣就不會有意外。
new Promise((resolve, reject) => {
return resolve(1);
// 后面的語句不會執(zhí)行
console.log(2);
})3. Promise.prototype.then()
Promise 實例具有then方法，也就是說， then 方法是定義在原型對象 Promise.prototype 上的。它的作用是為 Promise 實例添加狀態(tài)改變時的回調(diào)函數(shù)。前面說過， then 方法的第一個參數(shù)是 resolved 狀態(tài)的回調(diào)函數(shù)，第二個參數(shù)（可選）是 rejected 狀態(tài)的回調(diào)函數(shù)。
then 方法返回的是一個新的 Promise 實例（注意，不是原來那個 Promise 實例）。因此可以采用鏈式寫法，即 then 方法后面再調(diào)用另一個 then 方法。
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
// ...
}); 上面的代碼使用 then 方法，依次指定了兩個回調(diào)函數(shù)。第一個回調(diào)函數(shù)完成以后，會將返回結(jié)果作為參數(shù)，傳入第二個回調(diào)函數(shù)。
采用鏈式的 then ，可以指定一組按照次序調(diào)用的回調(diào)函數(shù)。這時，前一個回調(diào)函數(shù)，有可能返回的還是一個 Promise 對象（即有異步操作），這時后一個回調(diào)函數(shù)，就會等待該 Promise 對象的狀態(tài)發(fā)生變化，才會被調(diào)用。
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function (comments) {
console.log("resolved: ", comments);
}, function (err){
console.log("rejected: ", err);
});上面代碼中，第一個 then 方法指定的回調(diào)函數(shù)，返回的是另一個 Promise 對象。這時，第二個 then 方法指定的回調(diào)函數(shù)，就會等待這個新的 Promise 對象狀態(tài)發(fā)生變化。如果變?yōu)?resolved ，就調(diào)用第一個回調(diào)函數(shù)，如果狀態(tài)變?yōu)?rejected ，就調(diào)用第二個回調(diào)函數(shù)。
如果采用箭頭函數(shù)，上面的代碼可以寫得更簡潔。
getJSON("/post/1.json").then(
post => getJSON(post.commentURL)
).then(
comments => console.log("resolved: ", comments),
err => console.log("rejected: ", err)
);4. Promise.prototype.catch()
Promise.prototype.catch()方法是 .then(null, rejection)或 .then(undefined, rejection)的別名，用于指定發(fā)生錯誤時的回調(diào)函數(shù)。
getJSON('/posts.json').then(function(posts) {
// ...
}).catch(function(error) {
// 處理 getJSON 和 前一個回調(diào)函數(shù)運行時發(fā)生的錯誤
console.log('發(fā)生錯誤！', error);
});上面代碼中， getJSON() 方法返回一個 Promise 對象，如果該對象狀態(tài)變?yōu)?resolved ，則會調(diào)用 then() 方法指定的回調(diào)函數(shù)；如果異步操作拋出錯誤，狀態(tài)就會變?yōu)?rejected ，就會調(diào)用 catch() 方法指定的回調(diào)函數(shù)，處理這個錯誤。另外， then() 方法指定的回調(diào)函數(shù)，如果運行中拋出錯誤，也會被 catch() 方法捕獲。
p.then((val) => console.log('fulfilled:', val))
.catch((err) => console.log('rejected', err));
// 等同于
p.then((val) => console.log('fulfilled:', val))
.then(null, (err) => console.log("rejected:", err));下面是一個例子。
const promise = new Promise(function(resolve, reject) {
throw new Error('test');
});
promise.catch(function(error) {
console.log(error);
});
// Error: test上面代碼中， promise 拋出一個錯誤，就被 catch() 方法指定的回調(diào)函數(shù)捕獲。注意，上面的寫法與下面兩種寫法是等價的。
// 寫法一
const promise = new Promise(function(resolve, reject) {
try {
throw new Error('test');
} catch(e) {
reject(e);
}
});
promise.catch(function(error) {
console.log(error);
});
// 寫法二
const promise = new Promise(function(resolve, reject) {
reject(new Error('test'));
});
promise.catch(function(error) {
console.log(error);
});比較上面兩種寫法，可以發(fā)現(xiàn) reject() 方法的作用，等同于拋出錯誤。
如果 Promise 狀態(tài)已經(jīng)變成 resolved ，再拋出錯誤是無效的。
const promise = new Promise(function(resolve, reject) {
resolve('ok');
throw new Error('test');
});
promise
.then(function(value) { console.log(value) })
.catch(function(error) { console.log(error) });
// ok上面代碼中，Promise 在 resolve 語句后面，再拋出錯誤，不會被捕獲，等于沒有拋出。因為 Promise 的狀態(tài)一旦改變，就永久保持該狀態(tài)，不會再變了。
Promise 對象的錯誤具有“冒泡”性質(zhì)，會一直向后傳遞，直到被捕獲為止。也就是說，錯誤總是會被下一個 catch 語句捕獲。
getJSON('/post/1.json').then(function(post) {
return getJSON(post.commentURL);
}).then(function(comments) {
// some code
}).catch(function(error) {
// 處理前面三個Promise產(chǎn)生的錯誤
});上面代碼中，一共有三個 Promise 對象：一個由 getJSON() 產(chǎn)生，兩個由 then() 產(chǎn)生。它們之中任何一個拋出的錯誤，都會被最后一個 catch() 捕獲。
一般來說，不要在 then() 方法里面定義 Reject 狀態(tài)的回調(diào)函數(shù)（即 then 的第二個參數(shù)），總是使用 catch 方法。
// bad
promise
.then(function(data) {
// success
}, function(err) {
// error
});
// good
promise
.then(function(data) { //cb
// success
})
.catch(function(err) {
// error
});上面代碼中，第二種寫法要好于第一種寫法，理由是第二種寫法可以捕獲前面 then 方法執(zhí)行中的錯誤，也更接近同步的寫法（ try/catch ）。因此，建議總是使用 catch() 方法，而不使用 then() 方法的第二個參數(shù)。
跟傳統(tǒng)的 try/catch 代碼塊不同的是，如果沒有使用 catch() 方法指定錯誤處理的回調(diào)函數(shù)，Promise 對象拋出的錯誤不會傳遞到外層代碼，即不會有任何反應(yīng)。
const someAsyncThing = function() {
return new Promise(function(resolve, reject) {
// 下面一行會報錯，因為x沒有聲明
resolve(x + 2);
});
};
someAsyncThing().then(function() {
console.log('everything is great');
});
setTimeout(() => { console.log(123) }, 2000);
// Uncaught (in promise) ReferenceError: x is not defined
// 123上面代碼中， someAsyncThing() 函數(shù)產(chǎn)生的 Promise 對象，內(nèi)部有語法錯誤。瀏覽器運行到這一行，會打印出錯誤提示 ReferenceError: x is not defined ，但是不會退出進程、終止腳本執(zhí)行，2 秒之后還是會輸出 123 。這就是說，Promise 內(nèi)部的錯誤不會影響到 Promise 外部的代碼，通俗的說法就是“Promise 會吃掉錯誤”。
這個腳本放在服務(wù)器執(zhí)行，退出碼就是 0 （即表示執(zhí)行成功）。不過，Node.js 有一個 unhandledRejection 事件，專門監(jiān)聽未捕獲的 reject 錯誤，上面的腳本會觸發(fā)這個事件的監(jiān)聽函數(shù)，可以在監(jiān)聽函數(shù)里面拋出錯誤。
process.on('unhandledRejection', function (err, p) {
throw err;
});上面代碼中， unhandledRejection 事件的監(jiān)聽函數(shù)有兩個參數(shù)，第一個是錯誤對象，第二個是報錯的 Promise 實例，它可以用來了解發(fā)生錯誤的環(huán)境信息。
注意，Node 有計劃在未來廢除 unhandledRejection 事件。如果 Promise 內(nèi)部有未捕獲的錯誤，會直接終止進程，并且進程的退出碼不為 0。
再看下面的例子。
const promise = new Promise(function (resolve, reject) {
resolve('ok');
setTimeout(function () { throw new Error('test') }, 0)
});
promise.then(function (value) { console.log(value) });
// ok
// Uncaught Error: test上面代碼中，Promise 指定在下一輪“事件循環(huán)”再拋出錯誤。到了那個時候，Promise 的運行已經(jīng)結(jié)束了，所以這個錯誤是在 Promise 函數(shù)體外拋出的，會冒泡到最外層，成了未捕獲的錯誤。
一般總是建議，Promise 對象后面要跟 catch() 方法，這樣可以處理 Promise 內(nèi)部發(fā)生的錯誤。 catch() 方法返回的還是一個 Promise 對象，因此后面還可以接著調(diào)用 then() 方法。
const someAsyncThing = function() {
return new Promise(function(resolve, reject) {
// 下面一行會報錯，因為x沒有聲明
resolve(x + 2);
});
};
someAsyncThing()
.catch(function(error) {
console.log('oh no', error);
})
.then(function() {
console.log('carry on');
});
// oh no [ReferenceError: x is not defined]
// carry on上面代碼運行完 catch() 方法指定的回調(diào)函數(shù)，會接著運行后面那個 then() 方法指定的回調(diào)函數(shù)。如果沒有報錯，則會跳過 catch() 方法。
Promise.resolve()
.catch(function(error) {
console.log('oh no', error);
})
.then(function() {
console.log('carry on');
});
// carry on上面的代碼因為沒有報錯，跳過了 catch() 方法，直接執(zhí)行后面的 then() 方法。此時，要是 then() 方法里面報錯，就與前面的 catch() 無關(guān)了。
catch() 方法之中，還能再拋出錯誤。
const someAsyncThing = function() {
return new Promise(function(resolve, reject) {
// 下面一行會報錯，因為x沒有聲明
resolve(x + 2);
});
};
someAsyncThing().then(function() {
return someOtherAsyncThing();
}).catch(function(error) {
console.log('oh no', error);
// 下面一行會報錯，因為 y 沒有聲明
y + 2;
}).then(function() {
console.log('carry on');
});
// oh no [ReferenceError: x is not defined]上面代碼中， catch() 方法拋出一個錯誤，因為后面沒有別的 catch() 方法了，導(dǎo)致這個錯誤不會被捕獲，也不會傳遞到外層。如果改寫一下，結(jié)果就不一樣了。
someAsyncThing().then(function() {
return someOtherAsyncThing();
}).catch(function(error) {
console.log('oh no', error);
// 下面一行會報錯，因為y沒有聲明
y + 2;
}).catch(function(error) {
console.log('carry on', error);
});
// oh no [ReferenceError: x is not defined]
// carry on [ReferenceError: y is not defined]上面代碼中，第二個 catch() 方法用來捕獲前一個 catch() 方法拋出的錯誤。
5. Promise.prototype.finally()
finally()方法用于指定不管Promise對象最后狀態(tài)如何，都會執(zhí)行的操作。該方法是 ES2018引入標準的。
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});上面代碼中，不管 promise 最后的狀態(tài)，在執(zhí)行完 then 或 catch 指定的回調(diào)函數(shù)以后，都會執(zhí)行 finally 方法指定的回調(diào)函數(shù)。
下面是一個例子，服務(wù)器使用 Promise 處理請求，然后使用 finally 方法關(guān)掉服務(wù)器。
server.listen(port)
.then(function () {
// ...
})
.finally(server.stop);finally 方法的回調(diào)函數(shù)不接受任何參數(shù)，這意味著沒有辦法知道，前面的 Promise 狀態(tài)到底是 fulfilled 還是 rejected 。這表明， finally 方法里面的操作，應(yīng)該是與狀態(tài)無關(guān)的，不依賴于 Promise 的執(zhí)行結(jié)果。
finally 本質(zhì)上是 then 方法的特例。
promise
.finally(() => {
// 語句
});
// 等同于
promise
.then(
result => {
// 語句
return result;
},
error => {
// 語句
throw error;
}
);上面代碼中，如果不使用 finally 方法，同樣的語句需要為成功和失敗兩種情況各寫一次。有了 finally 方法，則只需要寫一次。
它的實現(xiàn)也很簡單。
Promise.prototype.finally = function (callback) {
let P = this.constructor;
return this.then(
value => P.resolve(callback()).then(() => value),
reason => P.resolve(callback()).then(() => { throw reason })
);
};上面代碼中，不管前面的 Promise 是 fulfilled 還是 rejected ，都會執(zhí)行回調(diào)函數(shù) callback 。
從上面的實現(xiàn)還可以看到， finally 方法總是會返回原來的值。
// resolve 的值是 undefined
Promise.resolve(2).then(() => {}, () => {})
// resolve 的值是 2
Promise.resolve(2).finally(() => {})
// reject 的值是 undefined
Promise.reject(3).then(() => {}, () => {})
// reject 的值是 3
Promise.reject(3).finally(() => {})6. Promise.all()
Promise.all()方法用于將多個Promise 實例，包裝成一個新的 Promise 實例。
const p = Promise.all([p1, p2, p3]);上面代碼中， Promise.all() 方法接受一個數(shù)組作為參數(shù)， p1 、 p2 、 p3 都是 Promise 實例，如果不是，就會先調(diào)用下面講到的 Promise.resolve 方法，將參數(shù)轉(zhuǎn)為 Promise 實例，再進一步處理。另外， Promise.all() 方法的參數(shù)可以不是數(shù)組，但必須具有 Iterator 接口，且返回的每個成員都是 Promise 實例。
p 的狀態(tài)由 p1 、 p2 、 p3 決定，分成兩種情況。
（1）只有 p1 、 p2 、 p3 的狀態(tài)都變成 fulfilled ， p 的狀態(tài)才會變成 fulfilled ，此時 p1 、 p2 、 p3 的返回值組成一個數(shù)組，傳遞給 p 的回調(diào)函數(shù)。
（2）只要 p1 、 p2 、 p3 之中有一個被 rejected ， p 的狀態(tài)就變成 rejected ，此時第一個被 reject 的實例的返回值，會傳遞給 p 的回調(diào)函數(shù)。
下面是一個具體的例子。
// 生成一個Promise對象的數(shù)組
const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
return getJSON('/post/' + id + ".json");
});
Promise.all(promises).then(function (posts) {
// ...
}).catch(function(reason){
// ...
});上面代碼中， promises 是包含 6 個 Promise 實例的數(shù)組，只有這 6 個實例的狀態(tài)都變成 fulfilled ，或者其中有一個變?yōu)?rejected ，才會調(diào)用 Promise.all 方法后面的回調(diào)函數(shù)。
下面是另一個例子。
const databasePromise = connectDatabase();
const booksPromise = databasePromise
.then(findAllBooks);
const userPromise = databasePromise
.then(getCurrentUser);
Promise.all([
booksPromise,
userPromise
])
.then(([books, user]) => pickTopRecommendations(books, user));上面代碼中， booksPromise 和 userPromise 是兩個異步操作，只有等到它們的結(jié)果都返回了，才會觸發(fā) pickTopRecommendations 這個回調(diào)函數(shù)。
注意，如果作為參數(shù)的 Promise 實例，自己定義了 catch 方法，那么它一旦被 rejected ，并不會觸發(fā) Promise.all() 的 catch 方法。
const p1 = new Promise((resolve, reject) => {
resolve('hello');
})
.then(result => result)
.catch(e => e);
const p2 = new Promise((resolve, reject) => {
throw new Error('報錯了');
})
.then(result => result)
.catch(e => e);
Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 報錯了]上面代碼中， p1 會 resolved ， p2 首先會 rejected ，但是 p2 有自己的 catch 方法，該方法返回的是一個新的 Promise 實例， p2 指向的實際上是這個實例。該實例執(zhí)行完 catch 方法后，也會變成 resolved ，導(dǎo)致 Promise.all() 方法參數(shù)里面的兩個實例都會 resolved ，因此會調(diào)用 then 方法指定的回調(diào)函數(shù)，而不會調(diào)用 catch 方法指定的回調(diào)函數(shù)。
如果 p2 沒有自己的 catch 方法，就會調(diào)用 Promise.all() 的 catch 方法。
const p1 = new Promise((resolve, reject) => {
resolve('hello');
})
.then(result => result);
const p2 = new Promise((resolve, reject) => {
throw new Error('報錯了');
})
.then(result => result);
Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// Error: 報錯了7. Promise.race()
Promise.race() 方法同樣是將多個 Promise 實例，包裝成一個新的 Promise 實例。
const p = Promise.race([p1, p2, p3]);上面代碼中，只要 p1 、 p2 、 p3 之中有一個實例率先改變狀態(tài)， p 的狀態(tài)就跟著改變。那個率先改變的 Promise 實例的返回值，就傳遞給 p 的回調(diào)函數(shù)。
Promise.race() 方法的參數(shù)與 Promise.all() 方法一樣，如果不是 Promise 實例，就會先調(diào)用下面講到的 Promise.resolve() 方法，將參數(shù)轉(zhuǎn)為 Promise 實例，再進一步處理。
下面是一個例子，如果指定時間內(nèi)沒有獲得結(jié)果，就將 Promise 的狀態(tài)變?yōu)?reject ，否則變?yōu)?resolve 。
const p = Promise.race([
fetch('/resource-that-may-take-a-while'),
new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('request timeout')), 5000)
})
]);
p
.then(console.log)
.catch(console.error);上面代碼中，如果 5 秒之內(nèi) fetch 方法無法返回結(jié)果，變量 p 的狀態(tài)就會變?yōu)?rejected ，從而觸發(fā) catch 方法指定的回調(diào)函數(shù)。
8. Promise.allSettled()
Promise.allSettled() 方法接受一組 Promise 實例作為參數(shù)，包裝成一個新的 Promise 實例。只有等到所有這些參數(shù)實例都返回結(jié)果，不管是 fulfilled 還是 rejected ，包裝實例才會結(jié)束。該方法由 ES2020 引入。
const promises = [
fetch('/api-1'),
fetch('/api-2'),
fetch('/api-3'),
];
await Promise.allSettled(promises);
removeLoadingIndicator();上面代碼對服務(wù)器發(fā)出三個請求，等到三個請求都結(jié)束，不管請求成功還是失敗，加載的滾動圖標就會消失。
該方法返回的新的 Promise 實例，一旦結(jié)束，狀態(tài)總是 fulfilled ，不會變成 rejected 。狀態(tài)變成 fulfilled 后，Promise 的監(jiān)聽函數(shù)接收到的參數(shù)是一個數(shù)組，每個成員對應(yīng)一個傳入 Promise.allSettled() 的 Promise 實例。
const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);
const allSettledPromise = Promise.allSettled([resolved, rejected]);
allSettledPromise.then(function (results) {
console.log(results);
});
// [
// { status: 'fulfilled', value: 42 },
// { status: 'rejected', reason: -1 }
// ]上面代碼中， Promise.allSettled() 的返回值 allSettledPromise ，狀態(tài)只可能變成 fulfilled 。它的監(jiān)聽函數(shù)接收到的參數(shù)是數(shù)組 results 。該數(shù)組的每個成員都是一個對象，對應(yīng)傳入 Promise.allSettled() 的兩個 Promise 實例。每個對象都有 status 屬性，該屬性的值只可能是字符串 fulfilled 或字符串 rejected 。 fulfilled 時，對象有 value 屬性， rejected 時有 reason 屬性，對應(yīng)兩種狀態(tài)的返回值。
下面是返回值用法的例子。
const promises = [ fetch('index.html'), fetch('https://does-not-exist/') ];
const results = await Promise.allSettled(promises);
// 過濾出成功的請求
const successfulPromises = results.filter(p => p.status === 'fulfilled');
// 過濾出失敗的請求，并輸出原因
const errors = results
.filter(p => p.status === 'rejected')
.map(p => p.reason);有時候，我們不關(guān)心異步操作的結(jié)果，只關(guān)心這些操作有沒有結(jié)束。這時， Promise.allSettled() 方法就很有用。如果沒有這個方法，想要確保所有操作都結(jié)束，就很麻煩。 Promise.all() 方法無法做到這一點。
const urls = [ /* ... */ ];
const requests = urls.map(x => fetch(x));
try {
await Promise.all(requests);
console.log('所有請求都成功。');
} catch {
console.log('至少一個請求失敗，其他請求可能還沒結(jié)束。');
}上面代碼中， Promise.all() 無法確定所有請求都結(jié)束。想要達到這個目的，寫起來很麻煩，有了 Promise.allSettled() ，這就很容易了。
9. Promise.any()
Promise.any()方法接受一組 Promise 實例作為參數(shù)，包裝成一個新的 Promise 實例。只要參數(shù)實例有一個變成 fulfilled 狀態(tài)，包裝實例就會變成 fulfilled 狀態(tài)；如果所有參數(shù)實例都變成 rejected 狀態(tài)，包裝實例就會變成 rejected 狀態(tài)。該方法目前是一個第三階段的提案 。
Promise.any() 跟 Promise.race() 方法很像，只有一點不同，就是不會因為某個 Promise 變成 rejected 狀態(tài)而結(jié)束。
const promises = [
fetch('/endpoint-a').then(() => 'a'),
fetch('/endpoint-b').then(() => 'b'),
fetch('/endpoint-c').then(() => 'c'),
];
try {
const first = await Promise.any(promises);
console.log(first);
} catch (error) {
console.log(error);
}上面代碼中， Promise.any() 方法的參數(shù)數(shù)組包含三個 Promise 操作。其中只要有一個變成 fulfilled ， Promise.any() 返回的 Promise 對象就變成 fulfilled 。如果所有三個操作都變成 rejected ，那么 await 命令就會拋出錯誤。
Promise.any() 拋出的錯誤，不是一個一般的錯誤，而是一個 AggregateError 實例。它相當于一個數(shù)組，每個成員對應(yīng)一個被 rejected 的操作所拋出的錯誤。下面是 AggregateError 的實現(xiàn)示例。
new AggregateError() extends Array -> AggregateError
const err = new AggregateError();
err.push(new Error("first error"));
err.push(new Error("second error"));
throw err;捕捉錯誤時，如果不用 try...catch 結(jié)構(gòu)和 await 命令，可以像下面這樣寫。
Promise.any(promises).then(
(first) => {
// Any of the promises was fulfilled.
},
(error) => {
// All of the promises were rejected.
}
);下面是一個例子。
var resolved = Promise.resolve(42);
var rejected = Promise.reject(-1);
var alsoRejected = Promise.reject(Infinity);
Promise.any([resolved, rejected, alsoRejected]).then(function (result) {
console.log(result); // 42
});
Promise.any([rejected, alsoRejected]).catch(function (results) {
console.log(results); // [-1, Infinity]
});10. Promise.resolve()
有時需要將現(xiàn)有對象轉(zhuǎn)為 Promise 對象，Promise.resolve()方法就起到這個作用。
const jsPromise = Promise.resolve($.ajax('/whatever.json'));上面代碼將 jQuery 生成的 deferred 對象，轉(zhuǎn)為一個新的 Promise 對象。
Promise.resolve() 等價于下面的寫法。
Promise.resolve('foo')
// 等價于
new Promise(resolve => resolve('foo'))Promise.resolve 方法的參數(shù)分成四種情況。
（1）參數(shù)是一個 Promise 實例
如果參數(shù)是 Promise 實例，那么 Promise.resolve 將不做任何修改、原封不動地返回這個實例。
（2）參數(shù)是一個 thenable 對象
thenable 對象指的是具有 then 方法的對象，比如下面這個對象。
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};Promise.resolve 方法會將這個對象轉(zhuǎn)為 Promise 對象，然后就立即執(zhí)行 thenable 對象的 then 方法。
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
console.log(value); // 42
});上面代碼中， thenable 對象的 then 方法執(zhí)行后，對象 p1 的狀態(tài)就變?yōu)?resolved ，從而立即執(zhí)行最后那個 then 方法指定的回調(diào)函數(shù)，輸出 42。
（3）參數(shù)不是具有 then 方法的對象，或根本就不是對象
如果參數(shù)是一個原始值，或者是一個不具有 then 方法的對象，則 Promise.resolve 方法返回一個新的 Promise 對象，狀態(tài)為 resolved 。
const p = Promise.resolve('Hello');
p.then(function (s){
console.log(s)
});
// Hello上面代碼生成一個新的 Promise 對象的實例 p 。由于字符串 Hello 不屬于異步操作（判斷方法是字符串對象不具有 then 方法），返回 Promise 實例的狀態(tài)從一生成就是 resolved ，所以回調(diào)函數(shù)會立即執(zhí)行。 Promise.resolve 方法的參數(shù)，會同時傳給回調(diào)函數(shù)。
（4）不帶有任何參數(shù)
Promise.resolve() 方法允許調(diào)用時不帶參數(shù)，直接返回一個 resolved 狀態(tài)的 Promise 對象。
所以，如果希望得到一個 Promise 對象，比較方便的方法就是直接調(diào)用 Promise.resolve() 方法。
const p = Promise.resolve();
p.then(function () {
// ...
});上面代碼的變量 p 就是一個 Promise 對象。
需要注意的是，立即 resolve() 的 Promise 對象，是在本輪“事件循環(huán)”（event loop）的結(jié)束時執(zhí)行，而不是在下一輪“事件循環(huán)”的開始時。
setTimeout(function () {
console.log('three');
}, 0);
Promise.resolve().then(function () {
console.log('two');
});
console.log('one');
// one
// two
// three上面代碼中， setTimeout(fn, 0) 在下一輪“事件循環(huán)”開始時執(zhí)行， Promise.resolve() 在本輪“事件循環(huán)”結(jié)束時執(zhí)行， console.log('one') 則是立即執(zhí)行，因此最先輸出。
11. Promise.reject()
Promise.reject(reason)方法也會返回一個新的 Promise 實例，該實例的狀態(tài)為 rejected 。
const p = Promise.reject('出錯了');
// 等同于
const p = new Promise((resolve, reject) => reject('出錯了'))
p.then(null, function (s) {
console.log(s)
});
// 出錯了上面代碼生成一個 Promise 對象的實例 p ，狀態(tài)為 rejected ，回調(diào)函數(shù)會立即執(zhí)行。
注意， Promise.reject() 方法的參數(shù)，會原封不動地作為 reject 的理由，變成后續(xù)方法的參數(shù)。這一點與 Promise.resolve 方法不一致。
const thenable = {
then(resolve, reject) {
reject('出錯了');
}
};
Promise.reject(thenable)
.catch(e => {
console.log(e === thenable)
})
// true上面代碼中， Promise.reject 方法的參數(shù)是一個 thenable 對象，執(zhí)行以后，后面 catch 方法的參數(shù)不是 reject 拋出的“出錯了”這個字符串，而是 thenable 對象。
12. 應(yīng)用
加載圖片
我們可以將圖片的加載寫成一個 Promise ，一旦加載完成， Promise 的狀態(tài)就發(fā)生變化。
const preloadImage = function (path) {
return new Promise(function (resolve, reject) {
const image = new Image();
image.onload = resolve;
image.onerror = reject;
image.src = path;
});
};Generator 函數(shù)與 Promise 的結(jié)合
使用Generator 函數(shù)管理流程，遇到異步操作的時候，通常返回一個 Promise 對象。
function getFoo () {
return new Promise(function (resolve, reject){
resolve('foo');
});
}
const g = function* () {
try {
const foo = yield getFoo();
console.log(foo);
} catch (e) {
console.log(e);
}
};
function run (generator) {
const it = generator();
function go(result) {
if (result.done) return result.value;
return result.value.then(function (value) {
return go(it.next(value));
}, function (error) {
return go(it.throw(error));
});
}
go(it.next());
}
run(g);上面代碼的 Generator 函數(shù) g 之中，有一個異步操作 getFoo ，它返回的就是一個 Promise 對象。函數(shù) run 用來處理這個 Promise 對象，并調(diào)用下一個 next 方法。
13. Promise.try()
實際開發(fā)中，經(jīng)常遇到一種情況：不知道或者不想?yún)^(qū)分，函數(shù) f 是同步函數(shù)還是異步操作，但是想用 Promise 來處理它。因為這樣就可以不管 f 是否包含異步操作，都用 then 方法指定下一步流程，用 catch 方法處理 f 拋出的錯誤。一般就會采用下面的寫法。
Promise.resolve().then(f)上面的寫法有一個缺點，就是如果 f 是同步函數(shù)，那么它會在本輪事件循環(huán)的末尾執(zhí)行。
const f = () => console.log('now');
Promise.resolve().then(f);
console.log('next');
// next
// now上面代碼中，函數(shù) f 是同步的，但是用 Promise 包裝了以后，就變成異步執(zhí)行了。
那么有沒有一種方法，讓同步函數(shù)同步執(zhí)行，異步函數(shù)異步執(zhí)行，并且讓它們具有統(tǒng)一的 API 呢？回答是可以的，并且還有兩種寫法。第一種寫法是用 async 函數(shù)來寫。
const f = () => console.log('now');
(async () => f())();
console.log('next');
// now
// next上面代碼中，第二行是一個立即執(zhí)行的匿名函數(shù)，會立即執(zhí)行里面的 async 函數(shù)，因此如果 f 是同步的，就會得到同步的結(jié)果；如果 f 是異步的，就可以用 then 指定下一步，就像下面的寫法。
(async () => f())()
.then(...)需要注意的是， async () => f() 會吃掉 f() 拋出的錯誤。所以，如果想捕獲錯誤，要使用 promise.catch 方法。
(async () => f())()
.then(...)
.catch(...)第二種寫法是使用 new Promise() 。
const f = () => console.log('now');
(
() => new Promise(
resolve => resolve(f())
)
)();
console.log('next');
// now
// next上面代碼也是使用立即執(zhí)行的匿名函數(shù)，執(zhí)行 new Promise() 。這種情況下，同步函數(shù)也是同步執(zhí)行的。
鑒于這是一個很常見的需求，所以現(xiàn)在有一個提案，提供 Promise.try 方法替代上面的寫法。
const f = () => console.log('now');
Promise.try(f);
console.log('next');
// now
// next事實上， Promise.try 存在已久，Promise 庫 Bluebird 、 Q 和 when ，早就提供了這個方法。
由于 Promise.try 為所有操作提供了統(tǒng)一的處理機制，所以如果想用 then 方法管理流程，最好都用 Promise.try 包裝一下。這樣有許多好處，其中一點就是可以更好地管理異常。
function getUsername(userId) {
return database.users.get({id: userId})
.then(function(user) {
return user.name;
});
}上面代碼中， database.users.get() 返回一個 Promise 對象，如果拋出異步錯誤，可以用 catch 方法捕獲，就像下面這樣寫。
database.users.get({id: userId})
.then(...)
.catch(...)但是 database.users.get() 可能還會拋出同步錯誤（比如數(shù)據(jù)庫連接錯誤，具體要看實現(xiàn)方法），這時你就不得不用 try...catch 去捕獲。
try {
database.users.get({id: userId})
.then(...)
.catch(...)
} catch (e) {
// ...
}上面這樣的寫法就很笨拙了，這時就可以統(tǒng)一用 promise.catch() 捕獲所有同步和異步的錯誤。
Promise.try(() => database.users.get({id: userId}))
.then(...)
.catch(...)事實上， Promise.try 就是模擬 try 代碼塊，就像 promise.catch 模擬的是 catch 代碼塊。
本文題目：創(chuàng)新互聯(lián)ES6教程：ES6Promise對象
URL地址：http://m.fisionsoft.com.cn/article/dhchgip.html
