JavaScript 开发者实用技巧：学习如何在 Array.map() 中运行异步函数

问题

最近我用 Node.js 写了一些 API 代码，遇到需要对每个项目使用Array.map()一个async函数的情况。我的 map 调用没有正常工作，这让我有点意外。记录 map 函数的输出结果如下：

[
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> },
]

我原本期望得到一个对象数组，其中每个对象都将通过 map 函数内部的异步 API 调用返回，但却得到了这个。

为什么要在内部使用异步函数Array.map()

Array.map()这是一个同步操作，它会对数组中的每个元素执行一个函数，最终生成一个包含更新项的新数组。但在某些情况下，我们需要在 map 函数中运行异步函数，例如更新模型列表并将更改后的信息推送回数据库，或者从 API 请求信息以用于后续操作。
让我们来解决在同步函数中运行异步操作的问题！

解决方案：Promise.all

一种执行异步操作的方法array.map()是为每个项目返回一个 Promise，然后在 map 函数外部解析该 Promise。由于 map 函数不会等待 Promise 解析完成，因此它会返回一个待处理的 Promise。

在使用 map 返回的数组中所有 Promise 的结果之前，你需要先处理并解决它们。使用 `resolve` 方法即可Promise.all(<array-of-promises>)。等待所有 Promise 完成的结果是另一个包含结果的数组。

让我们用一个例子来形象地说明这个概念：

const list = [] //...an array filled with values

const functionWithPromise = item => { //a function that returns a promise
  return Promise.resolve('ok')
}

const anAsyncFunction = async item => {
  return await functionWithPromise(item)
}

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

const data = getData()
console.log(data)

async/await是我最喜欢的 JavaScript 新特性之一，因为它让异步 JavaScript 代码更易读。如果你和我一样，你会发现它Promise.all在使用async/时非常有用await。

需要注意的是Promise.all()，这里使用了 `resolve`，它会在所有 Promise 都解决后list.map()返回一个 Promise 列表，因此最终我们会得到所有 Promise 都解决后的值。记住，任何调用 `resolve` 的代码都必须包装await在一个async函数中。
希望这对你有所帮助。请在下方留言或提出任何问题。

关于我

我是一名全栈 Web 开发人员，也是Bits n Bytes Dev Team的联合创始人。Bits n Bytes Dev Team是一个由才华横溢的专业自由职业开发人员组成的小团队，我们提供基于尖端技术的定制 Web 应用程序开发服务，以满足客户独特的业务需求。

我目前可以接受工作邀请，您可以访问我的作品集网站https://www.bitsnbytes.ir/portfolio查看，或者通过raadi@bitsnbytes.ir联系我。