在vuejs中順序調用函數

Question

我在順序執行函數/方法時遇到了vuejs中的一些問題。 我有這樣三個功能：

MethodA: function(){ 
    if(x = 1){ 
     value1 = 2; 
    } 

    if (x ==2){ 
     value2 = 4; 
    } 

    this.MethodB(); 
} 

MethodB: function(){ 
    Total value = value1 + value2; 
} 

MethodC: function(){ 
    this.$http.get('api/getvalue').then(function(response){ 
     this.set('somedata', response.data); 

     response.data.forEach(para){ 
      if(para.id == 1){ 
       this.MethodA(); 
      } 
      if(para.id == 2){ 
       this.MethodA(); 
      } 
     } 
    }); 
} 

ready: function(){ 
    this.MethodC(); 
} 

我想只有MethodC和MethodA完全執行後執行this.MethodB()。我怎樣才能做到這一點？

Answer 1

您可以使用JavaScript少輝與Vue.js方法：

methodA: function() { 
    return new Promise(function(resolve, reject) { 
     //run all your methodA code here 
     ... 

     resolve('MethodA finished'); 
    }); 
}, 
methodB: function() { 
    return new Promise(function(resolve, reject) { 
     //run all your methodB code here 
     ... 

     resolve('MethodB finished'); 
    }); 
}, 
methodC: function() { 
    //run your methodC code 
} 

現在，運行methodC只有當和了methodA的methodB完成後，您可以使用的承諾.then，並把它們連在一起。對於前：

ready: function() { 
    //save `this` to a variable just to make it easier to be accessed within the chain 
    let self = this; 

    //run methodA, then methodB...only then, methodC 
    self.methodA.then(function(resultA) { 
     console.log(resultA); 
     return self.methodB(); 
    }).then(function(resultB) { 
     console.log(resultB); 
     self.methodC(); 
    }); 
} 

注意：如果在運行AJAX中或了methodA調用的methodB，確保當您收到響應，只解決了承諾。在你的例如：

this.$http.get('api/getvalue').then(function(response){ 
    ... 
    resolve('My method is now complete'); 
}