ES6原生Promise的所有方法介紹（附一道應用場景題目）

JS的ES6已經出來很久了，作為前端工程師如果對此還不熟悉有點說不過去。不過如果要問，Promise原生的api一共有哪幾個？好像真的可以難倒一票人，包括我自己也忽略了其中一個不常用的API Promise.race。我們來瞧一下MDN對Promise的講解： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

來看一下Promise的方法和prototype列表：

【1】Promise.prototype.catch 在Promise被reject的時候觸發

【2】Promise.prototype.then 在Promise被resolve的時候觸發

【3】Promise.prototype.finally 無論Promise是否resolve還是reject，都會觸發。請注意，這個是一個比較新的特性，大部分瀏覽器並沒有實現該特性。Promise.prototype.finally目前的瀏覽器兼容性列表如下：

該特性還在Stage 3階段，等到在瀏覽器中大面積普及，估計要很久以后了。可以采用第三方庫的實現，比如bluebird。

【4】Promise.resolve 直接返回一個已經resolve的Promise實例

【5】Promise.reject 直接返回一個已經reject的Promise實例

【6】Promise.all 傳入一個Promise列表（常見的是由Promise組成的數組），只有當列表中所有的Promise都resolve時，該Promise才會resolve，只要有一個reject，則該Promise會reject。

【7】Promise.race 傳入一個Promise列表，其中第一個resolve的Promise會使得該Promise.race 最終 resolve，如果第一個完成的Promise是reject的，那么Promise.race最終也reject（其實就是和跑的最快的那個Promise結果一樣～）。

 

其實Promise的原生API也就這么幾個，其中Promise.all和Promise.race是最容易被忽略的兩個。我之前曾經不太熟悉Promise.race這個API導致實現一個需求卡住了很久。我們來通過一個小的練習熟悉該API的用法吧。

 

附上一道題目：

假設目前有1000個url下載鏈接，已經存儲在數組url[1000]中（即url = ['http://example.com/video1.mp3', ...., 'http://example.com/video1000.mp3']）,而且已經有一個函數function download，輸入一個url鏈接，返回一個Promise，該Promise在鏈接下載完成的時候resolve，下載失敗則reject。但是我們要求，任意時刻，同時下載的鏈接數量不可以超過10個。請寫一段代碼實現這個需求，要求盡可能快速地將該1000個鏈接下載完成。

思路：聲明一個長度為10的，由Promise組成的數組，用Promise.race做匯總，只要檢測到1個Promise resolve了，那就趕緊把那個Promise替換成一個新的再繼續下載。

const TotalTaskCount = 1000; // 一共有1000個鏈接
const MaxConcurrency = 10; // 同時下載的鏈接數最大不超過10
const url = [...]; // 1000個下載鏈接組成的數組
const download = function (urlStr) {
  // 返回Promise, 當下載完成的時候resolve
}

Answer：

let todoList = [];
let nextIndex = 0;
for (let j = 0; j < MaxConcurrency; j++) {
  let task = download(url[nextIndex]).then(() => {return j}); // 注意這里resolve的值是任務在todoList的腳標，方便我們在Promise.race之后找到完成的任務腳標
  todoList.push(task);
  nextIndex++;
}

const run = async function(todo) {
  let index = await Promise.race(todo); // 這里index等於Promise.race第一個完成的任務的腳標
  if (nextIndex < TotalTaskCount) {
    todo[index] = download(url[nextIndex]).then(() => {return index;}); // 一旦有一個任務完成，馬上把他替換成一個新的任務，繼續下載
    nextIndex++;
  }
  await run(todo);
}

run(todoList);