在JavaScript中,函数是一个异步操作,而forEach循环并不会等待异步操作完成

56 阅读1分钟

在JavaScript中,getActivity函数是一个异步操作,而forEach循环并不会等待异步操作完成。因此,在console.log(this.applyList)的时候,可能applyListTmp中的activityName尚未被设置。这会导致applyList中的元素没有相应的activityName值。

为了解决这个问题,你可以使用Promise.all来等待所有getActivity的Promise完成后再更新applyList。下面是修改后的代码:

javascriptCopy code
listApply(this.queryParams).then(response => {
  this.applyListTmp = response.rows;
  
  // 使用map创建一个数组包含所有getActivity的Promise
  const getActivityPromises = this.applyListTmp.map(item => {
    const activityId = item.activityId;
    
    // 调用getActivity接口
    return getActivity(activityId).then(activityDetails => {
      // 在这里处理获取到的活动详情,例如将其存储到一个数组中
      console.log(`Details for activity with ID ${activityId}:`, activityDetails);
      item.activityName = activityDetails.data.activityName;
    });
  });

  // 使用Promise.all等待所有getActivity的Promise完成
  Promise.all(getActivityPromises).then(() => {
    // 在所有Promise完成后更新applyList
    this.applyList = this.applyListTmp;
    console.log(this.applyList);
    this.total = response.total;
    this.loading = false;
  }).catch(error => {
    console.error('Error fetching activity details:', error);
    this.loading = false;
  });
});

这样,Promise.all将等待所有的getActivity请求完成后再更新applyList,确保applyList中的元素都已经设置了正确的activityName值。