今天在項(xiàng)目中遇到一個(gè)異步問(wèn)題，出現(xiàn)原因如下：

我在getEnergeHouseDanhao這個(gè)函數(shù)中加入了一個(gè)請(qǐng)求，該函數(shù)是獲取某機(jī)器單耗，但要請(qǐng)求四次分別去獲取年單耗、月單耗、日單耗、小時(shí)單耗

然而執(zhí)行后因?yàn)檎?qǐng)求是異步的，此時(shí)打印datas拿不到在請(qǐng)求中push進(jìn)去的數(shù)組，在設(shè)置定時(shí)器才能拿到數(shù)組。

然而我們無(wú)法確定接口的相應(yīng)時(shí)間，用定時(shí)器解決顯然是存在很大風(fēng)險(xiǎn)的。

那么該如何解決類似的問(wèn)題呢？可以使用promise.all解決異步。

首先簡(jiǎn)單且通俗易懂地介紹一下promise.all是什么，具體要深入理解請(qǐng)查閱官方文檔

而在需要用不同的入?yún)⑷ブ貜?fù)調(diào)用一個(gè)封裝的接口函數(shù)去請(qǐng)求數(shù)據(jù)時(shí)，我們可以先賦值一個(gè)存放入?yún)⒌臄?shù)組paramsList，通過(guò)map遍歷該數(shù)組去進(jìn)行一次次的請(qǐng)求，并將這些請(qǐng)求都放在promise.all里執(zhí)行，具體實(shí)現(xiàn)方法如下：

例：paramsList存放入?yún)⒌臄?shù)組

調(diào)用promise.all：

讓我們來(lái)看看打印出來(lái)的reslist是什么：

4個(gè)請(qǐng)求都成功，拿到一個(gè)有4個(gè)元素的數(shù)組，并每個(gè)數(shù)組都拿到了接口返回的data，這時(shí)就基本大功告成了。

再編寫一下.then內(nèi)的邏輯

大功告成~拿到數(shù)據(jù)就可以去繪制圖表了。

關(guān)于我自己封裝的圖表組件還很不完善，等未來(lái)完善得差不多了再發(fā)一帖吧

代碼：

      Promise.all(paramsList.map((item) => {
        return http.post("#你的請(qǐng)求", {
          ...item
        });
      })
      ).then((reslist) => {
        // 請(qǐng)求成功邏輯
        console.log(reslist);
      }).catch(() => {
        // 失敗邏輯
      });

THX~