Promise.all 踩坑记录

我乃小神神

发布于 2020-09-17 17:34:09

62600

代码可运行

文章被收录于专栏：前端基础前端基础

运行总次数：0

代码可运行

分享一个近期自己遇到的一个小问题。感觉自己真的是脑壳打铁，当时竟然卡壳了，特地记录一下

需求是这样的，一个数组列表里面需要一些特地的数据，这个数据可能有很多，然后拿到特定数据的id，去请求了当前特定id 的详情，然后拿到里面的数据，再渲染回来到页面上
思路大概就是拿到特定的数据，然后拿到id 去循环请求接口，嗯，由于是紧急需求，所以当前并不考虑性能的问题，然后后面这个模式其实已经修改了，因为如果数据很多的话，可能会涉及到性能问题，所以，当时就后来后端进行处理了数据

let dataA=[
{
id:1,
name:'BTC'
},
{
id:2,
name:'ETH'
}
....
]
let filterA=['BTC']

过滤数据很简单就一个 filter 方法就可以实现，问题就是每次拿到id 之后去请求拿到数据，然后回显到页面上这一步有点麻烦，其实仔细想一想并不麻烦

let dataB=‘请求详情方法’
    let remainingAmountList = dataA.map(item => dataB(item.id));
    return Promise.all(remainingAmountList)
          .then(result => {
            //这里返回的值就已经是每个详情的数据集合了，以下的数据就很简单了，只是做个笔记，记录一下 
            setLockList(result);
          })
          .catch(error => {
            console.log(error);
          });

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/09/14 ，如有侵权请联系 cloudcommunity@tencent.com 删除

渲染