js使用Promise.all() 来等待所有请求完成后再进行数据赋值操作

原创

国服第二切图仔

发布于 2024-06-13 09:29:53

1080

发布于 2024-06-13 09:29:53

文章被收录于专栏：jsjs

原有代码和问题：

在循环中进行请求并改变数据，实际上页面绑定的数据不生效

res.data.forEach(async (ele) => {
         let arr=[]
         let rsp =await getRelationship('Mc',ele.id,{endLabel: "Mcjs",getRelation: false})
         if(rsp.data){
                 ele.contents.nr=rsp.data[0].node.properties.mcjs;
              }
         });
resultList.value=res.data;

修改后的代码：

将代码改造成使用 Promise.all() 来等待所有请求完成后再进行赋值，需要首先创建一个包含所有异步请求的数组，然后使用 Promise.all() 来等待它们全部完成：

// 创建一个数组来保存所有的异步请求  
const asyncRequests = res.data.map(async (ele) => {  
  let rsp = await getRelationship('Mc', ele.id, { endLabel: "Mcjs", getRelation: false });  
  if (rsp.data) {  
    // 直接在map回调中更新ele的contents.nr  
    ele.contents.nr = rsp.data[0].node.properties.mcjs;  
  }  
  // map函数不需要返回任何值，因为我们只是更新ele对象  
});  
  
// 使用Promise.all等待所有请求完成  
Promise.all(asyncRequests)  
  .then(() => {  
    // 所有请求完成后，这里可以安全地更新resultList.value  
    resultList.value = res.data;  
    // 如果你需要基于更新后的res.data做一些操作，可以在这里进行  
  })  
  .catch((error) => {  
    // 如果有任何一个请求失败，Promise.all会在这里捕获错误  
    console.error('请求失败：', error);  
  });

在这个修改后的版本中，res.data.map() 返回一个包含所有异步函数的数组 asyncRequests。每个异步函数都负责发出一个请求并更新对应的 ele 对象。

然后，Promise.all(asyncRequests) 被用来等待所有这些异步请求完成。当所有请求都成功解决后，then 回调被调用，此时你可以安全地将更新后的 res.data 赋值给 resultList.value。

如果在任何请求中发生错误，Promise.all() 会拒绝（reject），并在 catch 回调中捕获到第一个失败的错误。这样，你就可以处理任何潜在的请求失败情况。

请注意，Promise.all() 不会改变 res.data 数组中的对象。相反，它只是在所有请求都完成后允许你执行某些操作（在这个例子中是更新 resultList.value）。因此，你在 map 回调中直接更新 ele.contents.nr，这些更新会反映在原始的 res.data 数组中。

我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S7