递归 AJAX 调用是个坏主意吗？

Question

我有一个简单的函数来拉入一组模板：

function getTemplates(names, done, templates, index) {
    if (!index) index = 0;
    if (!templates) templates = {};
    if (index === names.length) return done(templates);
    $.ajax({
        url: '/templates/' + names[index] + '.min.html',
        success: function (data, status, xhr) {
            templates[names[index++]] = data;
                return getTemplates(names, done, templates, index);
        }
    });
}

对我来说，从一个到下一个直到它们都被检索到，然后回调到调用函数，这似乎是合乎逻辑的。但我很好奇这样做是否有任何不良的副作用。到目前为止我还没有看到任何问题，但我不想在没有先了解任何潜在问题的情况下将其投入生产。

---

更新： 在 Google 和 BenjaminGruenbaum 的帮助下，我设计了一个解决方案：

function getTemplatesAsync(names, done) {
    var calls = [];
    var templates = {};
    names.forEach(function (name, index) {
        calls.push(
            $.ajax({
                url: '/templates/' + names[index] + '.min.html',
                success: function (data, status, xhr) {
                    templates[names[index++]] = data;
                }
            })
        );
    });
    $.when.apply($, calls).done(function () {
        // using "templates" here feels fragile for some reason.  Am I wrong?
        return done(templates);
    });
}

我在这里使用templates 是因为我需要能够按名称引用每个模板，但不知何故感觉它很脆弱或不可靠。这样做看起来安全吗？

Answer 1

是的。以这种方式进行多个 AJAX 调用是一个坏主意，但可能不是出于您认为的原因。

这将导致您的所有调用按顺序执行，而不是并行进行调用并等待它们以这种方式完成。

您最好使用promises 拨打所有电话，然后等待所有电话都完成后再继续。它看起来像：

var promises = [], templates = [], i;
for(i = 0; i < names.length; i++) {
    promises.push($.get('/templates/' + names[i] + '.min.html'));
}

$.when.apply($, promises).done(function(responses) {
   for(i = 0; i < responses.length; i++) {
       templates.push(responses[i][0]);
   }
});

Answer 2

虽然它看起来是递归的（我也使用术语recursive Ajax），但从技术上讲，您的函数在再次调用之前退出，所以实际上并不是递归的......也许我们应该称它们为“链接”Ajax 调用，因为它只是将异步事件链接在一起？ :)

如果您不介意一次将 Ajax 请求排队，那么这样做没有问题。我以这种方式使用了几次，以确保带宽使用是可以接受的。

您需要小心边缘情况，以便它优雅地处理服务器错误。

这实际上是一种很好的技术来处理移动设备，因为它会在一次发出大量请求时阻塞。

我写了一个插件，它通过 Ajax 加载大量应用程序表单的各个部分，发现像 iPad 这样的设备只能同时处理少量的 Ajax 请求。我最终使用递归/链式 Ajax 调用来解决问题（并且还没有阻塞我们的服务器）:)

Answer 3

您更新后的代码比最初的代码要好得多，但它仍然存在一些问题，主要问题是混合了承诺和回调，而不是使用语言工具（返回值）而不使用映射。

一些改进可以是：

• 返回承诺而不是回调参数
• 在 push 中使用 .map 而不是 forEach。
• 使用.then 而不是成功回调来避免同一事物的两个处理程序和可能未指定的行为（是否先执行when？success:？）

我们可以这样做：

function getTemplatesAsync(names) {
    return $.when.apply(null,names.map(function (name, index) {
        return $.get('/templates/' + names[index] + '.min.html');
    }).then(function(results){
         // map arguments to names
         return Array.prototype.reduce.call(arguments, function(obj,cur,idx){
               obj[names[idx]] = cur;
               return obj;
         },{});
    });
}

您可以这样做：

getTemplatesAsync(names).then(function(templates){
     // access templates here
});