jquery - 链接未知数量的 AJAX 请求

Question

尽管我读过很多帖子，但我还是有点困惑......

我想链接 N 个 AJAX 请求，其中 N >= 1。 N 取决于第一个请求的响应，并且第一个请求和其余请求之间存在依赖关系。我不想卡住浏览器。

由于用例有点复杂，我会尝试简化。想象一下，我们有一个 API，可以检索应用程序的所有用户以及每个用户的个人地址。我想显示所有地址。像这样的事情:

function doSomething() {

    var addresses = '';

    $.getJSON('/api/users', function(data) {
        $(data).each(function(id, user) {
            $.getJSON('/api/user/' + user.id + '/address', function(address) {
                addresses += address.displayName + '<br/>';
            });
        });
    });
    // do something with the addresses and display it somewhere
    $("#xxx").append(addresses);
}

最好的方法是什么？

Answer 1

使用 complete这样变量:

function doSomething() {

    var addresses = '';

    $.getJSON('/api/users', function(data) {
        var complete = 0;
        $(data).each(function(id, user) {
            $.getJSON('/api/user/' + user.id + '/address', function(address) {
                addresses += address.displayName + '<br/>';
                if (++complete !== data.length) { return; }
                // do something with the addresses and display it somewhere
                $("#xxx").append(addresses);
            });
        });
    });
}

此外，使用 Promise 是另一种解决方案:

function doSomething() {

    var addresses = '';

    $.getJSON('/api/users', function(data) {
        var $allAjax = [];
        $(data).each(function(id, user) {
            $allAjax.push($.getJSON('/api/user/' + user.id + '/address', function(address) {
                addresses += address.displayName + '<br/>';
            }));
        });
        $.when.apply($, $allAjax).done(function () {
            // do something with the addresses and display it somewhere
            $("#xxx").append(addresses);
        });
    });
}

要保持地址的顺序，您应该使用数组:

var addresses = [];

而不是 += address.displayName + "<br/>"你会做:

addresses[id] = address.displayName;

最后只需覆盖 addresses变量:

addresses = addresses.join("<br/>");