用promise.all搭配map方法解决异步问题

今天在项目中遇到一个异步问题，出现原因如下：

我在getEnergeHouseDanhao这个函数中加入了一个请求，该函数是获取某机器单耗，但要请求四次分别去获取年单耗、月单耗、日单耗、小时单耗

然而执行后因为请求是异步的，此时打印datas拿不到在请求中push进去的数组，在设置定时器才能拿到数组。

然而我们无法确定接口的相应时间，用定时器解决显然是存在很大风险的。

---

那么该如何解决类似的问题呢？可以使用promise.all解决异步。

首先简单且通俗易懂地介绍一下promise.all是什么，具体要深入理解请查阅官方文档

而在需要用不同的入参去重复调用一个封装的接口函数去请求数据时，我们可以先赋值一个存放入参的数组paramsList，通过map遍历该数组去进行一次次的请求，并将这些请求都放在promise.all里执行，具体实现方法如下：

例：paramsList存放入参的数组

调用promise.all：

让我们来看看打印出来的reslist是什么：

4个请求都成功，拿到一个有4个元素的数组，并每个数组都拿到了接口返回的data，这时就基本大功告成了。

再编写一下.then内的逻辑

大功告成~拿到数据就可以去绘制图表了。

---

关于我自己封装的图表组件还很不完善，等未来完善得差不多了再发一帖吧

代码：

      Promise.all(paramsList.map((item) => {
        return http.post("#你的请求", {
          ...item
        });
      })
      ).then((reslist) => {
        // 请求成功逻辑
        console.log(reslist);
      }).catch(() => {
        // 失败逻辑
      });

THX~