深入理解Promise.all

更新時(shí)間：2018年08月08日 14:55:52 作者：FlyWine

這篇文章主要介紹了深入理解Promise.all，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

異步之Promise

Promise.all

Promise.all接收的promise數(shù)組是按順序執(zhí)行的還是一起執(zhí)行的，也就是說返回的結(jié)果是順序固定的嗎？

目前有兩種答案：

應(yīng)該是同步執(zhí)行的，但是這樣就有效率問題了，如果想改成異步執(zhí)行怎么辦呢？
有些人認(rèn)為結(jié)果是按順序執(zhí)行的，有些人認(rèn)為結(jié)果順序不確定。

那么我們根據(jù)實(shí)現(xiàn)來解密：

環(huán)境為:

vscode 1.20.1
node  v8.9.0
npm  v5.6.0

實(shí)驗(yàn)代碼：

// 獲取隨機(jī)數(shù)，toFixed為四舍五入保留小數(shù)，0為保留整數(shù)，范圍～1000
const getRandom = () => +(Math.random()*1000).toFixed(0);

const asyncTask = (taskID) => new Promise( (resolve) => {
  // 隨機(jī)獲取一次0~1000的隨機(jī)數(shù)
  let timeout = getRandom();
  // 打印出傳遞進(jìn)來的ID號(hào) taskID=1 start.
  console.log(`taskID=${taskID} start.`);
  // 設(shè)置計(jì)時(shí)時(shí)間，function()等價(jià)于 () => {...}
  setTimeout(function() {
    // 打印出執(zhí)行的taskID,和timeout
    console.log(`taskID=${taskID} finished in time=${timeout}.`);
    // 異步成功執(zhí)行
    resolve(taskID)
  }, timeout);
});

Promise.all([asyncTask(1),asyncTask(2),asyncTask(3)])
.then(resultList => {
  console.log('results:',resultList);
});

實(shí)驗(yàn)結(jié)果如下：

第一次

taskID=1 start.
taskID=2 start.
taskID=3 start.
taskID=2 finished in time=321.
taskID=3 finished in time=506.
taskID=1 finished in time=932.
results:
Array(3) [1, 2, 3]

第二次

taskID=1 start.
taskID=2 start.
taskID=3 start.
taskID=1 finished in time=243.
taskID=3 finished in time=305.
taskID=2 finished in time=792.
results:
Array(3) [1, 2, 3]

第三次

taskID=1 start.
taskID=2 start.
taskID=3 start.
taskID=3 finished in time=380.
taskID=1 finished in time=539.
taskID=2 finished in time=782.
results:
Array(3) [1, 2, 3]

補(bǔ)充知識(shí)介紹：

// toFixed() 方法可把 Number 四舍五入為指定小數(shù)位數(shù)的數(shù)字。
NumberObject.toFixed(num)
// num 必需。規(guī)定小數(shù)的位數(shù)，是 0 ~ 20 之間的值，包括 0 和 
// 20，有些實(shí)現(xiàn)可以支持更大的數(shù)值范圍。如果省略了該參數(shù)，將用 0 代替。

Promise構(gòu)造函數(shù)只有一個(gè)參數(shù)，該參數(shù)是一個(gè)函數(shù)，被稱作執(zhí)行器，執(zhí)行器有2個(gè)參數(shù)，分別是resolve()和reject()，一個(gè)表示成功的回調(diào)，一個(gè)表示失敗的回調(diào)。

new Promise(function(resolve, reject) {
 setTimeout(() => resolve(5), 0)
}).then(v => console.log(v)) // 5

記住，Promise實(shí)例只能通過resolve或者reject函數(shù)來返回，并且使用then()或者catch()獲取，不能在new Promise里面直接return，這樣是獲取不到Promise返回值的。

由此可見，Promise.all 里的任務(wù)列表[asyncTask(1),asyncTask(2),asyncTask(3)],我們是按照順序發(fā)起的。
但是根據(jù)結(jié)果來說，它們是異步的，互相之間并不阻塞，每個(gè)任務(wù)完成時(shí)機(jī)是不確定的，盡管如此，所有任務(wù)結(jié)束之
后，它們的結(jié)果仍然是按順序地映射到resultList里,這樣就能和Promise.all里的任務(wù)列表
[asyncTask(1),asyncTask(2),asyncTask(3)]一一對(duì)應(yīng)起來。

深入理解Promise.all()

可能看到這里有些人沒有清楚，為什么返回一個(gè)數(shù)組？

我們?cè)趤砜匆幌逻@段代碼：

Promise.all([asyncTask(1),asyncTask(2),asyncTask(3)])
.then(resultList => {
  console.log('results:',resultList);
});

通常我們?cè)谑褂卯惒降臅r(shí)候都是只有一個(gè)Promise，現(xiàn)在我們使用all()方法包裝多個(gè)Promise實(shí)例。

語法很簡(jiǎn)單：參數(shù)只有一個(gè)，可迭代對(duì)象，可以是數(shù)組，或者Symbol類型等。

Promise.all(iterable).then().catch()

傳入3個(gè)Promise實(shí)例：

Promise.all([
 new Promise(function(resolve, reject) {
  resolve(1)
 }),
 new Promise(function(resolve, reject) {
  resolve(2)
 }),
 new Promise(function(resolve, reject) {
  resolve(3)
 })
]).then(arr => {
 console.log(arr) // [1, 2, 3]
})

那么我們回頭想想應(yīng)該明白了吧？

因?yàn)槲覀儌魅氲氖菙?shù)組，那么返回的必須是數(shù)組，并且會(huì)將講過進(jìn)行映射。

Promise.race()

語法和all()一樣，但是返回值有所不同，race根據(jù)傳入的多個(gè)Promise實(shí)例，只要有一個(gè)實(shí)例resolve或者reject，就只返回該結(jié)果，其他實(shí)例不再執(zhí)行。

我們簡(jiǎn)單看一下例子，返回結(jié)果為3，因?yàn)槲覀冊(cè)O(shè)置了定時(shí)器，第三個(gè)Promise執(zhí)行的最快。

Promise.race([
 new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 1000)
 }),
 new Promise(function(resolve, reject) {
  setTimeout(() => resolve(2), 100)
 }),
 new Promise(function(resolve, reject) {
  setTimeout(() => resolve(3), 10)
 })
]).then(value => {
 console.log(value) // 3
})

異步為什么使用箭頭函數(shù)

這是我一直困惑的原因，我們將前面的例子進(jìn)行改造一下。

如下：

const getRandom = () => +(Math.random()*1000).toFixed(0);

function test(taskID) {
 new Promise( (resolve) => {
  // 隨機(jī)獲取一次0~1000的隨機(jī)數(shù)
  let timeout = getRandom();
  // 打印出傳遞進(jìn)來的ID號(hào)
  console.log(`taskID=${taskID} start.`);
  setTimeout(function() {
    console.log(`taskID=${taskID} finished in time=${timeout}.`);
    resolve(taskID)
  }, timeout);
} )
}

Promise.all([test(1),test(2),test(3)])
.then(resultList => {
  console.log('results:',resultList);
});

我們先來看一下結(jié)果是怎樣的？

第一次：

taskID=1 start.
taskID=2 start.
taskID=3 start.
results:
Array(3) [undefined, undefined, undefined]
taskID=1 finished in time=460.
taskID=2 finished in time=704.
taskID=3 finished in time=883.

第二次：

taskID=1 start.
taskID=2 start.
taskID=3 start.
results:
Array(3) [undefined, undefined, undefined]
taskID=2 finished in time=17.
taskID=3 finished in time=212.
taskID=1 finished in time=612.

第三次：

taskID=1 start.
taskID=2 start.
taskID=3 start.
results:
Array(3) [undefined, undefined, undefined]
taskID=3 finished in time=130.
taskID=1 finished in time=256.
taskID=2 finished in time=593.

實(shí)驗(yàn)還是要至少做上3次以上才有說服力。

通過輸出結(jié)果我們能夠看出返回的數(shù)組內(nèi)的數(shù)據(jù)都為undefined。我們就要找出這個(gè)原因，那就是找到了為什么要使用箭頭函數(shù)。

首先我通過調(diào)試來查找

如圖：

程序首先打印出了

taskID=1 start.
taskID=2 start.
taskID=3 start.

說明一定是先執(zhí)行了

console.log(`taskID=${taskID} start.`);

所以我們?cè)谶@段打上斷點(diǎn)進(jìn)行一步一步調(diào)試，如下：

根據(jù)上圖我們可以看出console.log(taskID=${taskID} start.)每次都會(huì)被執(zhí)行，setTimeout也會(huì)被執(zhí)行，但是3次之后，就會(huì)直接開始執(zhí)行.then()，所以我們找到了原因，Promise.all()這時(shí)并沒有等待返回完整的數(shù)據(jù)就執(zhí)行了.then()，沒有等到resolve就開始執(zhí)行了。

說明這里面出現(xiàn)了異常，而這個(gè)異常就是由于Promise.all()內(nèi)的參數(shù)，存在函數(shù)，造成this混淆，所以我們要使用對(duì)象，更準(zhǔn)確的說法就是實(shí)例。

注意：

以這段代碼為例：

var p1 = Promise.resolve(1),
  p2 = Promise.resolve(2),
  p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
  console.log(results); // [1, 2, 3]
});

在上面的方法中，promise數(shù)組中所有的promise實(shí)例都變?yōu)閞esolve的時(shí)候，該方法才會(huì)返回，并將所有結(jié)果傳遞results數(shù)組中。promise數(shù)組中任何一個(gè)promise為reject的話，則整個(gè)Promise.all調(diào)用會(huì)立即終止，并返回一個(gè)reject的新的promise對(duì)象。reject使用示例如下：

var p1 = Promise.resolve(1),
  p2 = Promise.reject(2),
  p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
  //then方法不會(huì)被執(zhí)行
  console.log(results); 
}).catch(function (e){
  //catch方法將會(huì)被執(zhí)行，輸出結(jié)果為：2
  console.log(2);
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: