寻找链接 AJAX 调用的模式

Question

我们有一个 AJAX Web 应用程序，我们有一个常见的模式是多个 ajax 调用一个接一个地调用。当我们保存带有多个附加实体的东西时，这很常见。一个例子可能是 saveCustomer() --> saveCustomerAddress() --> saveCustomersOrder()。

我们目前有这样当methodA() 成功时，即第一个方法，它调用methodB()，等等（见下面的代码）。这种模式的缺点是很难看到发生了什么。如果您阅读 methodA()，您不会从方法名称中了解到它还调用了 methodB() 和 methodC()。另一个缺点是，如果你想改变链接，你必须重写很多代码，如果你只想单独调用一个方法，那是做不到的，因为它会调用下游的方法。

function Tester() {
    this.url = 'https://public.opencpu.org/ocpu/library/';

    this.save = function() {
        this.methodA();
    }

    this.methodA = function () {
        var self = this;

        $.ajax({
            url: self.url,
            async: true
        }).always(function (processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {

            //check for errors... and if OK
            alert('A OK');
            self.methodB();

        })
    }
    this.methodB = function () {
        var self = this;

        $.ajax({
            url: self.url,
            async: true
        }).always(function (processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {

            //check for errors... and if OK
            alert('B OK');
            self.methodC();

        })
    }
    this.methodC = function () {
        var self = this;

        $.ajax({
            url: self.url,
            async: true
        }).always(function (processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {
            //OK
            alert('C OK');
        })
    }
}
new Tester().save();

我正在挠头，试图找出更好的模式。我想你可以将后面的方法封装在回调函数中，然后以某种方式将它们传递给每个方法，但我不确定如何处理。

是否有人知道在链接方法时可以删除方法依赖项的常见模式类型？

Answer 1

function A() {
    writeMessage("Calling Function A");
    return $.ajax({
        url: "/scripts/S9/1.json",
        type: "GET",                    
        dataType: "json"
    });
}


function B(resultFromA) {
    writeMessage("In Function B. Result From A = " + resultFromA.data);
    return $.ajax({
        url: "/scripts/S9/2.json",
        type: "GET",
        dataType: "json"
    });
}


function C(resultFromB) {
    writeMessage("In Function C. Result From B =  " + resultFromB.data);
    return $.ajax({
        url: "/scripts/S9/3.json",
        type: "GET",
        dataType: "json"
    });
}

function D(resultFromC) {
    writeMessage("In Function D. Result From C = " + resultFromC.data);
}

A().then(B).then(C).then(D);

function writeMessage(msg) {
    $("#para").append(msg + "</br>");                 
}

Answer 2

你可以像这样使用动态调用：

        this.reqChain = ['req_1', 'req_2'];

        this.callChain = function(){
            if(!self.reqChain.length) return;
            ajax({
                url: self.reqChain[0],
                async: true,        
                always: function(processedDataOrXHRWrapper, textStatus, whrWrapperOrErrorThrown){
                   self.reqChain.shift();
                   $(document).trigger('request_'+self.reqChain[0]+'_callback', [processedDataOrXHRWrapper, textStatus, whrWrapperOrErrorThrown])
                   self.callChain();
                }
           });
    }

您可以传递回调，也可以绑定到动态事件。

Answer 3

这是我对自己问题的回答。我将我所有的方法包装在函数中，并通过回调传递给我的方法。

它似乎完成了这项工作。有人有cmet吗？

function Tester2() {

    this.save = function() {

        var self = this;

        var callbackC = function() {
            self.methodC();
        }

        var callbackB = function() {
            self.methodB(callbackC);
        }

        this.methodA(callbackB);

    }

    this.methodA = function (callbackFn) {
        var self = this;

        $.ajax({
            url: self.url,
            async: true
        }).always(function (processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {


            //check for errors... and if OK
            alert('A OK');
            if (callbackFn)
                callbackFn();

        })
    }
    this.methodB = function (callbackFn) {
        var self = this;

        $.ajax({
            url: self.url,
            async: true
        }).always(function (processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {


            //check for errors... and if OK
            alert('B OK');
            if (callbackFn)
                callbackFn();

        })
    }
    this.methodC = function () {
        var self = this;

        $.ajax({
            url: self.url,
            async: true
        }).always(function (processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {
            //OK
            alert('C OK');
        })
    }
}

new Tester2().save();

Answer 4

试试这个：

function Tester() {
    var self = this;
    this.url = 'https://public.opencpu.org/ocpu/library/';

    this.save = function() {
        self.methodA().then( self.methodB() ).then( self.methodC() )
    }

    this.methodA = function () {
        var self = this;

        return $.ajax({
            url: self.url,
            async: true
        }).always(function (processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {

            //check for errors... and if OK
            alert('A OK');


        })
    }
    this.methodB = function () {
        var self = this;

        return $.ajax({
            url: self.url,
            async: true
        }).always(function (processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {

            //check for errors... and if OK
            alert('B OK');


        })
    }
    this.methodC = function () {
        var self = this;

        return $.ajax({
            url: self.url,
            async: true
        }).always(function (processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {
            //OK

        })
    }
}
new Tester().save();