JS for循环中fetch获取数据赋值给对象仅返回Promise的解决方法

问题根源 #

所有async标记的异步函数默认返回Promise对象，你在组装meals字段时没有await等待fetchMealDetails的请求结果，直接赋值自然只会存入Promise实例，而非接口返回的实际数据。

正确实现方案 #

批量异步请求推荐使用Promise.all并行处理，相比串行等待请求的写法效率更高，修改后的代码如下：

1. 改造日程解析方法 #

async parseMemberScheduleData(aSchedule) {
  // 收集每个日程项的处理Promise
  const schedulePromises = aSchedule.schedule.map(async (item) => {
    // 并行请求当前日程的所有餐食详情
    const [breakfast, secondBreakfast, lunch, dinner, supper] = await Promise.all([
      this.fetchMealDetails(item.breakfast),
      this.fetchMealDetails(item.secondBreakfast),
      this.fetchMealDetails(item.lunch),
      this.fetchMealDetails(item.dinner),
      this.fetchMealDetails(item.supper),
    ])
    // 所有请求完成后组装当前日程数据
    return {
      date: item.date,
      meals: {
        breakfast,
        secondBreakfast,
        lunch,
        dinner,
        supper
      },
      mealsId: {
        breakfast: item.breakfast,
        secondBreakfast: item.secondBreakfast,
        lunch: item.lunch,
        dinner: item.dinner,
        supper: item.supper
      }
    }
  })
  // 等待所有日程项处理完成，得到最终数组
  const arr = await Promise.all(schedulePromises)
  // 这里可以继续后续逻辑，比如把arr赋值给组件状态等
  console.log('处理完成的日程数据：', arr)
}

2. 调整调用逻辑 #

因为改造后的parseMemberScheduleData是异步方法，调用时如果需要等待处理完成再执行后续操作，可以添加await：

async function initPageData() {
  let a = { /* 你的原始JSON数据 */ }
  await this.parseMemberScheduleData(a)
  // 后续页面渲染逻辑
}

注意事项 #

• 该方案会并发发起所有餐食详情请求，若你的服务端有QPS限制，可以调整为串行请求（在循环内依次await每个请求即可），但整体加载速度会变慢。
• 若某一餐食的详情请求失败，目前的fetchMealDetails会返回undefined，你可以根据业务需求补充默认值兜底。

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