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

我想在this.MethodB()和MethodC完全执行后才执行MethodA。我怎样才能做到这一点？

Answer 1

您可以将Javascript Promises与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
}

现在，仅在methodA和methodB完成时运行methodC，您可以使用promises .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();
    });
}

注意：如果您在methodA或methodB中运行AJAX调用，请确保仅在收到响应时解析promise。在你的前任：

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

在vuejs中按顺序调用函数

1 个答案: