如何在一个async函数中正确使用另一个async异步函数的返回数据

核心错误原因 #

async函数执行后默认返回Promise对象，你调用getUsernames()时没有添加await关键字，players变量拿到的是未完成的Promise实例而非实际的用户名数组，因此后续逻辑无法正常执行。

额外需要修正的代码问题 #

• 原for循环的判断条件写为i = players.length，属于赋值操作，会触发死循环，需改为i < players.length
• chessAPI.getPlayerStats的入参应为玩家用户名，而非循环下标i
• 原代码中names、i变量未做声明，会污染全局作用域

修正后可运行代码 #

const getUsernames = async function() {
  const response = await chessAPI.getCountryPlayers('RE')
  const names = [...response.body.players]
  return names
}

const grabPlayerScores = async function() {
  // 新增await等待getUsernames执行完成返回结果
  const players = await getUsernames()
  for (let i = 0; i < players.length; i++) {
    // 传入用户名而非下标
    const data = await chessAPI.getPlayerStats(players[i])
    console.log(data)
  }
}

grabPlayerScores();

可选优化方案 #

如果希望提升数据拉取效率，可以使用Promise.all并行发起所有玩家数据请求，无需串行等待单个请求返回：

const grabPlayerScores = async function() {
  const players = await getUsernames()
  // 批量生成所有请求的Promise
  const requestList = players.map(username => chessAPI.getPlayerStats(username))
  // 等待所有请求完成
  const allPlayerData = await Promise.all(requestList)
  allPlayerData.forEach(data => console.log(data))
}

内容的提问来源于stack exchange，提问作者Wells