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) => {});