iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 23
0
自我挑戰組

利用30分鐘~想一個前端問題系列 第 23

利用30分鐘~想一個前端問題 Day23-runPromisesInSeries

runPromisesInSeries

Runs an array of promises in series.

Use Array.prototype.reduce() to create a promise chain, where each promise returns the next promise when resolved.

執行一組串連的promise
用 Array.prototype.reduce() 去創造 promise chain,鏈中每一個 promise 狀態,變為resolved 狀態時,返回下一個 promise 。

const runPromisesInSeries = ps => ps.reduce((p, next) => p.then(next), Promise.resolve());
//EXAMPLES
const delay = d => new Promise(r => setTimeout(r, d));
runPromisesInSeries([() => delay(1000), () => delay(2000)]); // Executes each promise sequentially, taking a total of 3 seconds to complete

分析點

1.reduce()

語法:

arr.reduce(callback[accumulator, currentValue, currentIndex, array], initialValue)

reduce()方法接收一個函數作為累加器,陣列的每個數(從左到右)開始縮減
最終為一個值

reduce 為陣列的每一個元素依次執行回調函數,不包括陣列中被刪除或從未被賦值的元素,接受四個參數:

  • accumulator - 上一輪累計加總
  • currentValue -陣列中正在處理的元素
  • currentIndex - 陣列中正在處理的當前元素的索引(可省略)
  • array - 陣列內容(可省略)
  • initialValue - 累計處理的結果
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));

或是


let result = [1,2,5].reduce((accumulator,item)=>{
    return accumulator + item
},0) // initial value

console.log(result);

最後一個值0 是起始值,每次reduce 返回的值都會作為下次reduce 回調函數的第一個參數,直到隊列循環完畢,因此可以進行累加計算。

用在promise 身上 是類似像這樣

function myPromiseQuene(myPromise){ 
 myPromise.reduce(prePromise,nextPromise)=>prePromise.then(()=>nextPromise()),Promise.resoleve()
}

當上一個 promise 開始執行 (prePromise.then),當執行完畢之後再進行下一個promise,並會作為一個 新的 promise 產生 下次迭代就會進行這個循環。

new Promise((resolve,reject)=>{
resolve()
}).then(result=>{
  return  result //#promise1
}).then(result=>{
  return  result //#promise2
}).then(result=>{ 
  return  result //#promise3
})

reduce 的作用就是在內存中生成這個陣列,而不需要把這個冗餘的陣列寫在代碼裡!

用reduce將promise串接到Promise.resolve()後面

[1, 2, 3, 4].reduce(
  (p, current) => p.then(() => delayPromise(current)),
  Promise.resolve()
)
/* 等效於 
Promise.resolve()
.then(()=>delayPromise(1))
.then(()=>delayPromise(2))
.then(()=>delayPromise(3))
.then(()=>delayPromise(4))
*/

參考文章

reduce 陣列用法


上一篇
利用30分鐘~想一個前端問題 Day22- tomorrow
下一篇
利用30分鐘~想一個前端問題 Day24-What is the difference between JavaScript's for...in, for...of ?
系列文
利用30分鐘~想一個前端問題30

尚未有邦友留言

立即登入留言