VUE中Promise鏈式調用和Promise.all的實戰用法，網上的博客大部分簡單使用的介紹，沒有實際代碼介紹對新手朋友使用不友好。

Promise主要用處理異步操作，解決回調地獄的問題，幫助我們序列化處理后台數據。

1.Promise三種狀態：

Pending（進行中，初始狀態，既不是成功，也不是失敗狀態。）、Resolved（已完成，又稱 Fulfilled）、Rejected（已失敗）

1. 這三種狀態的變化途徑只有2種：
2. 異步操作從 未完成 pending => 已完成 resolved
3. 異步操作從 未完成 pending => 失敗 rejected
4. 狀態一旦改變，就無法再次改變狀態，這也是它名字 promise-承諾 的由來，一個promise對象只能改變一次

2.先對vue的方法進行進行Promise包裝，原有方法不變，添加了一層Promise，鏈式調用的方法都需要Promise包裝下

getPromiseEvaluatingType1() {  //原有方法
      let promise = new Promise((resolve, reject) => { // 新添加Promise包裝
        this.$axios({
          method: "get",
          url: this.BASE_URL + "/evaluating/getEvaluatingType",
          params: {
            evaluatingId: this.evaluatingId,
          },
        })
          .then((response) => {
            this.type = response.data.data.Forms.type;
            this.evaluatingNumber = response.data.data.Forms.userNumber;
            this.evaluatingWorkNumber = response.data.data.Forms.id;
            console.log("========", this.evaluatingWorkNumber); //新添加Promise包裝
            resolve("promise_getPromiseEvaluatingType1");
          })
          .catch((error) => {
            console.log(error); //請求失敗返回的數據
          });
      });
      return promise; //新添加Promise包裝
    },

 

3.Promise鏈式調用使用:.then方法中return 下一個需要調用的方法就可以。

this.getPromiseEvaluatingType1()
        .then((data) => {
          console.log("Promist_data1:", data);
          return this.getPromiseDetailsEval2(); //Promise 包裝的第二個方法
        })
        .then((data) => {
          console.log("Promist_data2:", data);
          return this.getPromiseFormsReviewContents3(); //Promise 包裝的第三個方法
        })
        .then((data) => {
          console.log("Promist_data3:", data);
          this.myloading.close();
        });

 

4.Promise.all 指定先執行那些方法，然后在執行別的接口，先執行的方法也必須Promise包裝下

//[this.getUserMsg()] 這里方法是數組，可以是一個，也可以是多個，這里的方法必須Promise包裝下

Promise.all([this.getUserMsg()]) 
      .then((data) => {
        console.log("promise", data);//這里是數組中方法執行完才會執行
        this.getRoleType();
        this.evaluaList();
      })
      .catch((err) => {});