JavaScript中forEach循环调用API收集结果返回空数组问题

• 遍历逻辑不支持异步等待：forEach方法不会感知内部的异步回调执行状态，发起API请求后会直接执行后续的打印和resolve操作，此时接口请求尚未返回，数组还未被赋值
• 变量作用域错误：responses_by_nicknames2定义在第一层forEach的循环体内，外部无法访问该变量，最终你resolve的responses_by_nicknames属于未定义的无效变量
• 冗余Promise嵌套：async函数本身会自动返回Promise实例，不需要额外嵌套new Promise包装逻辑
• 变量引用错误：你在Promise.then回调中接收参数名为body，但push数组时用了未定义的res变量

首先是简化后的responses_by_id方法：

const responses_by_id = async (id) => {
  const responses = await axios.get(`https://api.surveymonkey.com/v3/surveys/${id}/responses/bulk`, {
    headers: {
      'Authorization': config
    }
  })
  return responses.data
}

然后是responses_by_nicknames方法：

const responses_by_nicknames = async (nicknames) => {
  const allResponsePromises = []
  // 用for of代替forEach，方便处理异步逻辑
  for (const userItem of nicknames) {
    const currentNickname = userItem.nickname
    // 遍历当前用户下的所有问卷，收集所有请求Promise
    for (const surveyItem of userItem.surveys) {
      allResponsePromises.push(
        responses_by_id(surveyItem.id).then(res => {
          // 你可以根据需要调整返回的数据结构
          return {
            nickname: currentNickname,
            surveyId: surveyItem.id,
            responseData: res
          }
        })
      )
    }
  }
  // 等待所有请求全部完成后再返回
  const allResponses = await Promise.all(allResponsePromises)
  console.log("!!@@", allResponses)
  return allResponses
}

// 调用时需要用await或者.then获取最终结果
const getSurveyData = async () => {
  const nicknamesList = [] // 替换为你实际的入参数组
  const finalResult = await responses_by_nicknames(nicknamesList)
  // 这里可以拿到完整的响应数组
  console.log(finalResult)
}

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