javascript - jQuery done() 向下三级

Question

我有三个 ajax 调用，它们为我提供数据，并将这些数据推送到数组中。

第二个函数在第一个函数之后调用(在它的成功函数中)，这样数组就不会被异步填充。

我的目标是使用 jQuery did() 函数(或类似函数)在最后进行某种回调(在我的代码中标记为“END!!”)。然而，jQuery did() 函数在第一级达到其成功函数后开始启动。

var ajaxQuery = $.ormon('ajax', {
    url: '../getjson',
    trtyp: 'adm1034',
    dataType: 'json',
    data: {
        clients:1
    },

    success: function(data) {
        console.log("1");

        for (i = 0; i < data.length; i++) {
            var name = data[i].adr1 + " " + data[i].adr2;
            kontaktdata.push({name: name, usrid: data[i].usr});
        }

        $.ormon('ajax', {
            url: '../getjson',
            trtyp: 'adm1034',
            dataType: 'json',
            data: {
                clients:2
            },

            success: function(data) {
                console.log("2");

                for (i = 0; i < data.length; i++) {
                    var name = "(CRM Lead) - " + data[i].adr1 + " " + data[i].adr2;
                    kontaktdata.push({name: name, usrid: data[i].usr});
                }

                $.ormon('ajax', {
                    url: '../getjson',
                    trtyp: 'adm1034',
                    dataType: 'json',
                    data: {
                        clients:3
                    },

                    success: function(data) {
                        console.log("3");
                        for(i = 0; i < data.length; i++) {
                            var name = "(MXVV Kunden) - " + data[i].adr1 + " " + data[i].adr2;
                            kontaktdata.push({name: name, usrid: data[i].usr});
                        }

                        //END!!!!!!!!

                        console.log(kontaktdata);
                    }
                });
            }
        });
    }
});

ajaxQuery.done(function(response) {alert("done");});

Answer 1

您应该使用then，而不是使用done或success回调。它链接异步操作并为您提供最后结果的 promise 。在你的情况下，它看起来像这样:

var kontaktdata = [];
var ajaxQuery = $.ormon('ajax', {
    url: '../getjson',
    trtyp: 'adm1034',
    dataType: 'json',
    data: {clients: 1}
}).then(function(data) {
    console.log("1");
    for (var i = 0; i < data.length; i++) {
        var name = data[i].adr1 + " " + data[i].adr2;
        kontaktdata.push({name: name, usrid: data[i].usr});
    }
    return $.ormon('ajax', {
//  ^^^^^^ return another promise from the callback
        url: '../getjson',
        trtyp: 'adm1034',
        dataType: 'json',
        data: {clients: 2}
    });
}).then(function(data) {
    console.log("2");
    for (var i = 0; i < data.length; i++) {
        var name = "(CRM Lead) - " + data[i].adr1 + " " + data[i].adr2;
        kontaktdata.push({name: name, usrid: data[i].usr});
    }
    return $.ormon('ajax', {
        url: '../getjson',
        trtyp: 'adm1034',
        dataType: 'json',
        data: {clients: 3}
    });
}).then(function(data) {
    console.log("3");
    for(var i = 0; i < data.length; i++) {
        var name = "(MXVV Kunden) - " + data[i].adr1 + " " + data[i].adr2;
        kontaktdata.push({name: name, usrid: data[i].usr});
    }
    return kontaktdata; //END!!!!!!!!
});

ajaxQuery.done(function(result) {
    console.log(result);
    alert("done");
});

好吧，这很有效，但看起来仍然很乏味。如果要提出的请求多于 3 个怎么办？您想在循环中对此进行编码，现在很容易实现:

var ajaxQuery = $.when([]);
for (var client=1; client<=3; client++) (function(client) {
    ajaxQuery = ajaxQuery.then(function(kontaktdata) {
        return  $.ormon('ajax', {
            url: '../getjson',
            trtyp: 'adm1034',
            dataType: 'json',
            data: {clients: client}
        }).then(function(data) {
            console.log(client);
            for (var i = 0; i < data.length; i++) {
                kontaktdata.push({
                    name: data[i].adr1 + " " + data[i].adr2,
                    usrid: data[i].usr
                });
            return kontaktdata;
        });
    });
}(client)); // necessary extra scope for closure

ajaxQuery.done(function(result) {
    console.log(result);
    alert("done");
});

有了 Promise，它会变得更好 - 您可以轻松地并行发送所有三个请求，然后 wait until they're all done ，并连接结果:

var requests = [];
for (var client=1; client<=3; client++)
    requests.push($.ormon('ajax', {
        url: '../getjson',
        trtyp: 'adm1034',
        dataType: 'json',
        data: {clients: client}
    }).then(function(data) {
        return data.map(function(d) {
            return {name: d.adr1+" "+d.adr2, usrid: d.usr};
        });
    }));
var ajaxQuery = $.when.apply($, requests).then(function() {
    return [].concat.apply([], arguments);
});
ajaxQuery.then(function(result) {
    console.log(result);
    alert("done");
}, function(err) {
    console.error(err + " went wrong");
});

使用 Promise 还有一个额外的好处，即任何 ajax 失败或异步异常都会被捕获，并且您可以在末尾放置一个类似 catch 的处理程序。