15道ES6 Promise實戰練習題，助你快速理解Promise

Promise是ES6中的特性，現在很多前端框架像AngularJS，Vue等在HTTP請求之后都是返回的Promise處理，因此Promise是必須要掌握的一個知識點。
本文將為大家分享15道由易到難的ES6 Promise題, 幫助你快速理解Promise。

基礎題

const promise = new Promise((resolve, reject) => {
    console.log(1)
    resolve()
    console.log(2)
})
promise.then(() => {
    console.log(3)
})
console.log(4)

解析：
Promise 構造函數是同步執行的，promise.then 中的函數是異步執行的。
運行結果：

// => 1
// => 2
// => 4
// => 3

const first = () => (new Promise((resolve, reject) => {
    console.log(3);
    let p = new Promise((resolve, reject) => {
        console.log(7);
        setTimeout(() => {
            console.log(5);
            resolve(6);
        }, 0)
        resolve(1);
    });
    resolve(2);
    p.then((arg) => {
        console.log(arg);
    });

}));

first().then((arg) => {
    console.log(arg);
});
console.log(4);

解析：
這道題主要理解js執行機制。
第一輪事件循環，先執行宏任務，主script，new Promise立即執行，輸出 3，執行p這個new Promise操作，輸出 7，發現setTimeout，將回調函數放入下一輪任務隊列（Event Quene），p的then，暫且命名為then1，放入微任務隊列，且first也有then，命名為then2，放入微任務隊列。執行console.log(4),輸出 4，宏任務執行結束。
再執行微任務，執行then1,輸出 1，執行then2,輸出 3.
第一輪事件循環結束，開始執行第二輪。第二輪事件循環先執行宏任務里面的，也就是setTimeout的回調，輸出 5.resolve(6)不會生效，因為p的Promise狀態一旦改變就不會再變化了。
運行結果：

// => 3
// => 7
// => 4
// => 1
// => 2
// => 5

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 1000)
})
const promise2 = promise1.then(() => {
  throw new Error('error!!!')
})

console.log('promise1', promise1)
console.log('promise2', promise2)

setTimeout(() => {
  console.log('promise1', promise1)
  console.log('promise2', promise2)
}, 2000)

運行結果：

promise1 Promise {<pending>}
promise2 Promise {<pending>}
Uncaught (in promise) Error: error!!!
    at <anonymous>
promise1 Promise {<resolved>: "success"}
promise2 Promise {<rejected>: Error: error!!!
    at <anonymous>}

解釋：promise 有 3 種狀態：pending、fulfilled 或 rejected。狀態改變只能是 pending->fulfilled 或者 pending->rejected，狀態一旦改變則不能再變。上面 promise2 并不是 promise1，而是返回的一個新的 Promise 實例。

const promise = new Promise((resolve, reject) => {
  resolve('success1')
  reject('error')
  resolve('success2')
})

promise
  .then((res) => {
    console.log('then: ', res)
  })
  .catch((err) => {
    console.log('catch: ', err)
  })

解析：
構造函數中的 resolve 或 reject 只有第一次執行有效，多次調用沒有任何作用，呼應代碼二結論：promise 狀態一旦改變則不能再變。
運行結果：

then: success1

Promise.resolve(1)
  .then((res) => {
    console.log(res)
    return 2
  })
  .catch((err) => {
    return 3
  })
  .then((res) => {
    console.log(res)
  })

解析：
promise 可以鏈式調用。提起鏈式調用我們通常會想到通過 return this 實現，不過 Promise 并不是這樣實現的。promise 每次調用 .then 或者 .catch 都會返回一個新的 promise，從而實現了鏈式調用。
運行結果：

1
2

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('once')
    resolve('success')
  }, 1000)
})

const start = Date.now()
promise.then((res) => {
  console.log(res, Date.now() - start)
})
promise.then((res) => {
  console.log(res, Date.now() - start)
})

解析：
promise 的 .then 或者 .catch 可以被調用多次，但這里 Promise 構造函數只執行一次。或者說 promise 內部狀態一經改變，并且有了一個值，那么后續每次調用 .then 或者 .catch 都會直接拿到該值。
運行結果：

once
success 1005
success 1007

Promise.resolve()
  .then(() => {
    return new Error('error!!!')
  })
  .then((res) => {
    console.log('then: ', res)
  })
  .catch((err) => {
    console.log('catch: ', err)
  })

解析：
.then 或者 .catch 中 return 一個 error 對象并不會拋出錯誤，所以不會被后續的 .catch 捕獲，需要改成其中一種：
return Promise.reject(new Error('error!!!'))
throw new Error('error!!!')
因為返回任意一個非 promise 的值都會被包裹成 promise 對象，即 return new Error('error!!!') 等價于 return Promise.resolve(new Error('error!!!'))。
運行結果：

then:  Error: error!!!
    at <anonymous>

const promise = Promise.resolve()
  .then(() => {
    return promise
  })
promise.catch(console.error)

解析：.then 或 .catch 返回的值不能是 promise 本身，否則會造成死循環。類似于：

process.nextTick(function tick () {
  console.log('tick')
  process.nextTick(tick)
})

運行結果：

TypeError: Chaining cycle detected for promise #<Promise>

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

解析：
.then 或者 .catch 的參數期望是函數，傳入非函數則會發生值穿透。
運行結果：

Promise.resolve()
  .then(function success (res) {
    throw new Error('error')
  }, function fail1 (e) {
    console.error('fail1: ', e)
  })
  .catch(function fail2 (e) {
    console.error('fail2: ', e)
  })

解析：
.then 可以接收兩個參數，第一個是處理成功的函數，第二個是處理錯誤的函數。
.catch 是 .then 第二個參數的簡便寫法，但是它們用法上有一點需要注意：.then 的第二個處理錯誤的函數捕獲不了第一個處理成功的函數拋出的錯誤，而后續的 .catch 可以捕獲之前的錯誤。
當然以下代碼也可以：

Promise.resolve()
  .then(function success1 (res) {
    throw new Error('error')
  }, function fail1 (e) {
    console.error('fail1: ', e)
  })
  .then(function success2 (res) {
  }, function fail2 (e) {
    console.error('fail2: ', e)
  })

運行結果：

fail2:  Error: error
    at success (<anonymous>)

process.nextTick(() => {
  console.log('nextTick')
})
Promise.resolve()
  .then(() => {
    console.log('then')
  })
setImmediate(() => {
  console.log('setImmediate')
})
console.log('end')

解析：
process.nextTick 和 promise.then 都屬于 microtask，而 setImmediate 屬于 macrotask，在事件循環的 check 階段執行。事件循環的每個階段（macrotask）之間都會執行 microtask，事件循環的開始會先執行一次 microtask。
運行結果：

end
nextTick
then
setImmediate

12
紅燈3秒亮一次，綠燈1秒亮一次，黃燈2秒亮一次；如何使用Promise讓三個燈不斷交替重復亮燈？

function red(){
    console.log('red');
}
function green(){
    console.log('green');
}
function yellow(){
    console.log('yellow');
}

分析：
先看題目，題目要求紅燈亮過后，綠燈才能亮，綠燈亮過后，黃燈才能亮，黃燈亮過后，紅燈才能亮……所以怎么通過Promise實現？
換句話說，就是紅燈亮起時，承諾2s秒后亮綠燈，綠燈亮起時承諾1s后亮黃燈，黃燈亮起時，承諾3s后亮紅燈……這顯然是一個Promise鏈式調用，看到這里你心里或許就有思路了，我們需要將我們的每一個亮燈動作寫在then()方法中，同時返回一個新的Promise，并將其狀態由pending設置為fulfilled，允許下一盞燈亮起。

function red() {
  console.log('red');
}

function green() {
  console.log('green');
}

function yellow() {
  console.log('yellow');
}


let myLight = (timer, cb) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      cb();
      resolve();
    }, timer);
  });
};


let myStep = () => {
  Promise.resolve().then(() => {
    return myLight(3000, red);
  }).then(() => {
    return myLight(2000, green);
  }).then(()=>{
    return myLight(1000, yellow);
  }).then(()=>{
    myStep();
  })
};
myStep();

// output:
// => red
// => green
// => yellow
// => red
// => green
// => yellow
// => red

13
請實現一個mergePromise函數，把傳進去的數組按順序先后執行，并且把返回的數據先后放到數組data中。

const timeout = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, ms);
});

const ajax1 = () => timeout(2000).then(() => {
    console.log('1');
    return 1;
});

const ajax2 = () => timeout(1000).then(() => {
    console.log('2');
    return 2;
});

const ajax3 = () => timeout(2000).then(() => {
    console.log('3');
    return 3;
});

const mergePromise = ajaxArray => {
    // 在這里實現你的代碼

};

mergePromise([ajax1, ajax2, ajax3]).then(data => {
    console.log('done');
    console.log(data); // data 為 [1, 2, 3]
});

// 要求分別輸出
// 1
// 2
// 3
// done
// [1, 2, 3]

分析：
這道題主要考察用Promise控制異步流程，首先ajax1，ajax2，ajax3都是函數，只是這些函數執行后會返回一個Promise，按照題目要求只要順序執行這三個函數就好了，然后把結果放到data中;
答案：

const mergePromise = ajaxArray => {
  // 在這里實現你的代碼
  // 保存數組中的函數執行后的結果
  var data = [];

  // Promise.resolve方法調用時不帶參數，直接返回一個resolved狀態的 Promise 對象。
  var sequence = Promise.resolve();

  ajaxArray.forEach(item => {
    // 第一次的 then 方法用來執行數組中的每個函數，
    // 第二次的 then 方法接受數組中的函數執行后返回的結果，
    // 并把結果添加到 data 中，然后把 data 返回。
    sequence = sequence.then(item).then(res => {
      data.push(res);
      return data;
    });
  });

// 遍歷結束后，返回一個 Promise，也就是 sequence， 他的 [[PromiseValue]] 值就是 data，
// 而 data（保存數組中的函數執行后的結果） 也會作為參數，傳入下次調用的 then 方法中。
  return sequence;
};

14
現有8個圖片資源的url，已經存儲在數組urls中，且已有一個函數function loading，輸入一個url鏈接，返回一個Promise，該Promise在圖片下載完成的時候resolve，下載失敗則reject。
要求：任何時刻同時下載的鏈接數量不可以超過3個。
請寫一段代碼實現這個需求，要求盡可能快速地將所有圖片下載完成。

var urls = ['https://www.kkkk1000.com/images/getImgData/getImgDatadata.jpg', 'https://www.kkkk1000.com/images/getImgData/gray.gif', 'https://www.kkkk1000.com/images/getImgData/Particle.gif', 'https://www.kkkk1000.com/images/getImgData/arithmetic.png', 'https://www.kkkk1000.com/images/getImgData/arithmetic2.gif', 'https://www.kkkk1000.com/images/getImgData/getImgDataError.jpg', 'https://www.kkkk1000.com/images/getImgData/arithmetic.gif', 'https://www.kkkk1000.com/images/wxQrCode2.png'];

function loadImg(url) {
    return new Promise((resolve, reject) => {
        const img = new Image()
        img.onload = () => {
            console.log('一張圖片加載完成');
            resolve();
        }
        img.onerror = reject;
        img.src = url;
    })
};

解析
題目的意思是需要先并發請求3張圖片，當一張圖片加載完成后，又會繼續發起一張圖片的請求，讓并發數保持在3個，直到需要加載的圖片都全部發起請求。
用Promise來實現就是，先并發請求3個圖片資源，這樣可以得到3個Promise，組成一個數組promises，然后不斷調用Promise.race來返回最快改變狀態的Promise，然后從數組promises中刪掉這個Promise對象，再加入一個新的Promise，直到全部的url被取完，最后再使用Promise.all來處理一遍數組promises中沒有改變狀態的Promise。

function limitLoad(urls, handler, limit) {
  // 對數組做一個拷貝
    const sequence = […urls];
    let promises = [];
 //并發請求到最大數
  promises = sequence.splice(0, limit).map((url, index) => {
    // 這里返回的 index 是任務在 promises 的腳標，用于在 Promise.race 之后找到完成的任務腳標
    return handler(url).then(() => {
      return index;
    });
  });

  // 利用數組的 reduce 方法來以隊列的形式執行
  return sequence.reduce((last, url, currentIndex) => {
    return last.then(() => {
      // 返回最快改變狀態的 Promise
      return Promise.race(promises)
    }).catch(err => {
      // 這里的 catch 不僅用來捕獲前面 then 方法拋出的錯誤
      // 更重要的是防止中斷整個鏈式調用
      console.error(err)
    }).then((res) => {
      // 用新的 Promise 替換掉最快改變狀態的 Promise
      promises[res] = handler(sequence[currentIndex]).then(() => {
        return res
      });
    })
  }, Promise.resolve()).then(() => {
    return Promise.all(promises)
  })

}

limitLoad(urls, loadImg, 3);

/*
因為 limitLoad 函數也返回一個 Promise，所以當 所有圖片加載完成后，可以繼續鏈式調用

limitLoad(urls, loadImg, 3).then(() => {
    console.log('所有圖片加載完成');
}).catch(err => {
    console.error(err);
})
*/

15
封裝一個異步加載圖片的方法
解析：

function loadImageAsync(url) {
    return new Promise(function(resolve,reject) {
        var image = new Image();
        image.onload = function() {
            resolve(image) 
        };
        image.onerror = function() {
            reject(new Error('Could not load image at' + url));
        };
        image.src = url;
     });
}

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 228,606評論 6贊 533
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,582評論 3贊 418
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 176,540評論 0贊 376
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,028評論 1贊 314
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,801評論 6贊 410
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,223評論 1贊 324
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,294評論 3贊 442
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,442評論 0贊 289
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,976評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,800評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,996評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,543評論 5贊 360
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,233評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,662評論 0贊 26
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,926評論 1贊 286
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,702評論 3贊 392
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,991評論 2贊 374

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

15道ES6 Promise實戰練習題，助你快速理解Promise

15道ES6 Promise實戰練習題，助你快速理解Promise

基礎題

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

15道ES6 Promise實戰練習題，助你快速理解Promise

基礎題

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频