[筆記] Array.map 搭配 Promise 的使用方法 @地瓜大的飛翔旅程

章節連結

概念
程式碼
參考資料

近期在專案中遇上一個需求：陣列中的每個物件中，有一個 id 列表需要另打一支 api 來獲取每個 id 的相關細節。直覺會想到在 array.map 中的 callback 中傳入 async function 。在寫法上有一點需要注意，才不會屢次取得 Promise 的物件，而非 Promise.resolve 的結果。

概念

1. Array.map 回傳的每一個值，都會是 Promise。因此在最外層還需要使用 Promise.all() 包覆住，再用 await 解開才行，亦即非同步取得所有資料
2. 若要同步按照順序取得資料，那麼可以使用 for 迴圈或是透過 array.reduce 來確保順序性

程式碼

const ids = [5,4,3,2,1]
const wait = sec => {
  return new Promise(resolve=>{
    setTimeout(()=>{
      console.log(`${sec} seconds pass`)
      resolve()
    }, sec*1000)
  })
}

// serialization
await ids.reduce( async (_prev,next) => {
  const prev = await Promise.resolve(_prev)
  prev!=='' && await wait(prev)
  await wait(next)
  return Promise.resolve('')
});
console.log('serialization done')

// parallel
await Promise.all(ids.map(id=>wait(id)))
console.log('parallel done')

const ids = [5,4,3,2,1]

const wait = sec => {

return new Promise(resolve=>{

setTimeout(()=>{

console.log(`${sec} seconds pass`)

resolve()

}, sec*1000)

})

}

// serialization

await ids.reduce( async (_prev,next) => {

const prev = await Promise.resolve(_prev)

prev!=='' && await wait(prev)

await wait(next)

return Promise.resolve('')

});

console.log('serialization done')

// parallel

await Promise.all(ids.map(id=>wait(id)))

console.log('parallel done')

參考資料

1. 哥，我好想在 Array 的高階函數前面 await 喔！該怎麼做呢？
2. map() with async vs promise.all()

按讚加入粉絲團

概念

程式碼

參考資料

延伸閱讀