在 map 內使用 Asynchronous Function

Array.prototype.map 只能接受傳入 Synchronous Function，若要傳入 Asynchronous Function，可依需求使用不同方式實現。

Version

ECMAScript 2017

let data = [1, 2, 3]

let inc = x => x + 1

data.map (inc) // ?

map 用來改變 Array，可傳入 sync function，如預期回傳新 Array。

map003

let data = [1, 2, 3]

let inc = async x => x + 1

data.map (inc) // ?

若對 map 傳入 async function，會出現一堆 Pending Promise。

map001

let data = [1, 2, 3]

let inc = async x => x + 1

Promise.all (data.map (inc)) // ?

對於 Array 中的 Pending Promise，可使用 Promise.all 使其成為 Fulfilled。

map002

let data = [1, 2, 3]

let inc = async x => x + 1

let result = []

for (let x of data)
  result.push (await inc (x))

result // ?

若覺得 Promise.all + map 組合較麻煩，也可簡單使用 for loop + await 實現。

map000

當結果出現 Array 中一堆 Promise 時，別忘了使用 Promise.all 讓所有 Promise 都 fulfill
map 本來就不是設計用來使用 async function，若覺得還要搭配 Promise.all 太麻煩，可改用 for loop + await 較直覺，這也是少數 for loop 較適用場合