vue 函数执行顺序（vue 方法按照顺序执行）

在调用后台方法的时候
  
  
  
  
  
  
  ，由于调用了多个方法 
  
  
  
  
  
  
，但是执行的时候并没有按照顺序执行 


 


 


 


 


 


 

，前端需要后台返回的数据
 
 
 
 
 
 
 ，对数据进行页面展示  
   
   
   
   
   
   
，由于没有按照顺序执行 

 

 

 

 

 

 
，导致前台页面报错
  
  
  
  
  
  
  。解决办法采用new Promise单独执行每个方法

 

 

 

 

 

 

 ，并返回resolve 
  
  
  
  
  
  
。以下是实现方法：

方式一：

    // 获取标签和绘制曲线数据

    mainMethod() {

      // 执行方法1

      this.method1().then((val) => {

        // 方法2

        this.method2().then((val) => {

          // 方法3

          this.method3().then((val) => {

            //  等待方法1
  
  
  
  
  
  
  、2 
  
  
  
  
  
  
、3 执行完成后执行方法“lastMethod             ”

            this.lastMethod();

          });

        });

      });

    },

    // 方法1

   method1() {

      return new Promise((resolve, reject) => {

        // 调用后端接口getMethod1

        getMethod1("CT01").then((response) => {

          this.detail_method1 = response.data;

          resolve( this.detail_method);

        });

      });

    },

    //  方法2

    method2() {

      return new Promise((resolve, reject) => {

        // 调用后端接口getMethod2

        getMethod2("CT02").then((response) => {

          this.detail_method2= response.data;

          resolve(this.detail_method2);

        });

      });

    },

    // 方法3

    method3() {

      return new Promise((resolve, reject) => {

       // 调用后端接口getMethod3

        getMethod3( "CT03").then((response) => {

          this.detail_method3 = response.data;

          resolve(this.detail_method3);

        });

      });

    },

 lastMethod() {

// 需要执行的方法内容

}

方式二：

vue一个页面很多接口时             ，异步请求的优化

1.使用 Promise.all()

Promise.all() 方法接收一个promise的iterable类型（注：Array 
 

 
 

 
 

 
 

 
 

 
 

 
 
，Map













，Set都属于ES6的iterable类型）的输入                    ，并且只返回一个Promise实例 
 
 
 
 
 
 
 
 
 
 
 
 
 
， 那个输入的所有promise的resolve回调的结果是一个数组 


 


 


 


 


 


 

。这个Promise的resolve回调执行是在所有输入的promise的resolve回调都结束



















，或者输入的iterable里没有promise了的时候
 
 
 
 
 
 
 。它的reject回调执行是              ，只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误 
 
  
 
  
 
  
 
  
 
  
 
  
 
，并且reject的是第一个抛出的错误信息

     let p1 = new Promise((resolve, reject) => {

          getNumber()

          resolve(成功了p1)

        })

        let p2 = new Promise((resolve, reject) => {

          getName()

          resolve(成功了p2)

        })

    let p3 = new Promise((resolve, reject) => {

      setTimeout(resolve, 100, foo);

    });

        Promise.all([p1, p2, p3]).then((result) => {

          console.log(result) // [成功了p1, 成功了p2, foo]

        }).catch((error) => {

        })

Promise.all 在任意一个传入的 promise 失败时返回失败  
   
   
   
   
   
   
。例如












，如果你传入的 promise中
  
  
  
  
  
  
  ，有四个 promise 在一定的时间之后调用成功函数 
  
  
  
  
  
  
，有一个立即调用失败函数 


 


 


 


 


 


 

，那么 Promise.all 将立即变为失败 

 

 

 

 

 

 
。

var p1 = new Promise((resolve, reject) => {

  setTimeout(resolve, 1000, one);

});

var p2 = new Promise((resolve, reject) => {

  setTimeout(resolve, 2000, two);

});

var p3 = new Promise((resolve, reject) => {

  reject(reject);

});

Promise.all([p1, p2, p3]).then(values => {

  console.log(values);

}).catch(reason => {

  console.log(reason)

});

2.Promise.race(iterable) 方法返回一个 promise
 
 
 
 
 
 
 ，一旦迭代器中的某个promise解决或拒绝  
   
   
   
   
   
   
，返回的 promise就会解决或拒绝

 

 

 

 

 

 

 。

var p1 = new Promise(function(resolve, reject) {

            setTimeout(resolve, 500, "one");

        });

        var p2 = new Promise(function(resolve, reject) {

            setTimeout(resolve, 100, "two");

        });

        Promise.race([p1, p2]).then(function(value) {

          console.log(value); // "two"

          // 两个都完成 

 

 

 

 

 

 
，但 p2 更快

        });

3.Promise.all()与Promise.race()请求时的区别

Promise.all() 适合于后面的异步请求接口依赖前面的接口请求的数据时使用             。

Promise.race() 没有先后顺序

 

 

 

 

 

 

 ，那个先请求回来那个先显示

参考链接：

https://www.csdn.net/tags/MtTaEgzsNjAwMzY5LWJsb2cO0O0O.htmlhttps://www.csdn.net/tags/MtTaEgzsNjAwMzY5LWJsb2cO0O0O.html