Aufruf der Funktion sequentiell in vuejs

Question

Ich habe ein Problem in Vuejs beim sequentiellen Ausführen einer Funktion/Methode. Ich habe drei Funktionen wie:

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(); 
} 

Ich möchte this.MethodB() auszuführen erst nach MethodC und MethodA vollständig ausgeführt hat. Wie kann ich das machen?

Answer 1

Sie Javascript verwenden Promises mit Vue.js Methoden:

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 
} 

Nun laufen methodC nur, wenn methodA und methodeB fertig sind, können Sie die Versprechungen verwenden .then und ketten sie zusammen. Für die Ex:

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(); 
    }); 
} 

Hinweis: Wenn Sie AJAX laufen Anrufe innerhalb methodA oder methodeB, stellen Sie sicher, dass das Versprechen nur zu lösen, wenn Sie eine Antwort erhalten. In Ihrem Beispiel: