如何使用Async和Await與Array.prototype.map()
結合async/await和map()的使用可能有點棘手。了解如何使用。
您想在map()調用中執行一個異步函數，對數組的每個元素執行操作並取回結果。
該如何做到這一點？
這是正確的語法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| 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數據刪除函數，首先刪除推文，然後刪除用戶：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| 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()
})
}
|
從技術上講，這可以更簡單地總結為
1
2
3
4
| export const clearData = async (prisma) => {
await prisma.tweet.deleteMany({})
await prisma.user.deleteMany({})
}
|
但上面的代碼也是有效的，並展示了如何在Array.map()中使用Promise，這是本教程的重點。
tags: [“async/await”, “promises”, “javascript”]