Promise.all方法

簡而言之：Promise.all( ).then( )適用於處理多個非同步任務，且所有的非同步任務都得到結果時的情況。

比如：使用者點選按鈕，會彈出一個彈出對話方塊，對話方塊中有兩部分資料呈現，這兩部分資料分別是不同的後端介面獲取的資料。

彈框彈出後的初始情況下，就讓這個彈出框處於資料載入中的狀態，當這兩部分資料都從介面獲取到的時候，才讓這個資料載入中狀態消失。讓使用者看到這兩部分的資料。

那麼此時，我們就需求這兩個非同步介面請求任務都完成的時候做處理，所以此時，使用Promise.all方法，就可以輕鬆的實現，我們來看一下程式碼寫法

程式碼附上

<template>
  <div class="box">
    <el-button type="primary" plain @click="clickFn">點開彈出框</el-button>
  </div>
</template>

<script>
export 
 
default {
  name: "App",
  methods: {
    clickFn() {
      this.alertMask = true; // 開啟彈出框
      this.loading = true; // 暫時還沒資料，所以就呈現loading載入中效果

      // 第一個非同步任務
      function asyncOne() {
        let async1 = new Promise(async (resolve, reject) => {
          setTimeout(() => {
            // 這裡我們用定時器模擬後端發請求的返回的結果，畢竟都是非同步的
 

            let apiData1 = "第一個介面返回資料啦";
            resolve(apiData1);
          }, 800);
        });
        return async1;
      }
      console.log("非同步任務一", asyncOne());  // 返回的是一個Promise物件

      // 第二個非同步任務
      function asyncTwo() {
        let async2 = new Promise(async (resolve, reject) => {
          setTimeout(() 
 
=> {
            let apiData2 = "第二個介面返回資料啦";
            resolve(apiData2);
          }, 700);
        });
        return async2;
      }
      console.log("非同步任務二", asyncTwo()); // 返回的是一個Promise物件

      let paramsArr = [asyncOne(), asyncTwo()]

      // Promise.all方法接收的引數是一個數組，陣列中的每一項是一個個的Promise物件
      // 我們在 .then方法裡面可以取到 .all的結果。這個結果是一個數組，陣列中的每一項
      // 對應的就是 .all陣列中的每一項的請求結果返回的值
      Promise
      .all(paramsArr)
      .then((value) => {
        console.log("Promise.all方法的結果", value);
        this.loading = true; // 現在有資料了，所以就關閉loading載入中效果
      });
    },
  },
};
</script>

列印的結果圖