前言

先来思考这个问题

const getData = (name: string): Promise<string> => {
  return new Promise(resolve => {
    resolve(name)
  })
}

const data: string[] = []

const initData = () => {
  const names = ['一', '二', '三', '四']
  names.map(async name => {
    const reslut = await getData(name)
    data = data.concat([reslut])
  })
  console.log(data)
}
initData()

你会得到一个空数组，这是一个简单的js同步异步的问题。

原因

因为在js中map是同步的方法，它并不会等待里面的异步逻辑执行完，再执行下一条，而是给每个函数同步的加上await，异步还没执行完，map就已经执行完了，所以在外部打印数据是空的。

js中的所有数据原型上的迭代遍历方法基本都是同步的，forEach打印也还是空数组。

解决

方法一·：使用for、for...in、for...of

const initData = async () => {
  const names = ['一', '二', '三', '四']
  for (const name of names) {
    const reslut = await getData(name)
    data = data.concat([reslut])
  }
  console.log(data)
}
initData()

这三种循环会等内部的异步逻辑执行完过后，再执行下一条逻辑。

方法二：Promise.all、Promise.allSettled

const initData = async () => {
  const names = ['一', '二', '三', '四']
  const reslut = await Promise.all(names.map(name => getData(name)))
  data = reslut
  console.log(data)
}
initData()

Promise.all是对于发起并发请求的一种解决方案。