結合async/await和map()的使用可能有點棘手。了解如何使用。

您想在map()調用中執行一個異步函數,對數組的每個元素執行操作並取回結果。

該如何做到這一點?

這是正確的語法:

const list = [1, 2, 3, 4, 5] //... 填充了數值的數組

const functionThatReturnsAPromise = item => { //返回一個Promise的函數
 return Promise.resolve('ok')
}

const doSomethingAsync = async item => {
 return functionThatReturnsAPromise(item)
}

const getData = async () => {
 return Promise.all(list.map(item => doSomethingAsync(item)))
}

getData().then(data => {
 console.log(data)
})

主要要注意的是Promise.all()的使用,當所有的Promise都被解析時,它才會被解析。

list.map()返回一個Promise列表,所以在result中,我們將得到當我們運行的所有內容都被解析時的值。

請記住,在調用await的任何代碼周圍都必須包裹在一個async函數中。

有關Promise的詳細信息,請參見Promises文章,以及async/await指南

使用這些占位符函數名稱來展示示例可能很難理解,所以這是一個簡單的例子,展示了如何使用這種技巧,這是我為Twitter克隆版本編寫的Prisma數據刪除函數,首先刪除推文,然後刪除用戶:

export const clearData = async (prisma) => {
 const users = await prisma.user.findMany({})
 const tweets = await prisma.tweet.findMany({})

 const deleteUser = async (user) => {
 return await prisma.user.delete({
 where: { id: user.id }
 })
 }
 const deleteTweet = async (tweet) => {
 return await prisma.tweet.delete({
 where: { id: tweet.id }
 })
 }

 const deleteTweets = async () => {
 return Promise.all(tweets.map((tweet) => deleteTweet(tweet)))
 }

 const deleteUsers = async () => {
 return Promise.all(users.map((user) => deleteUser(user)))
 }

 deleteTweets().then(() => {
 deleteUsers()
 })
}

從技術上講,這可以更簡單地總結為

export const clearData = async (prisma) => {
 await prisma.tweet.deleteMany({})
 await prisma.user.deleteMany({})
}

但上面的代碼也是有效的,並展示了如何在Array.map()中使用Promise,這是本教程的重點。