多个同时 ajax 请求代理

Question

如何协调同时进行的ajax调用，只在所有调用都完成后才采取行动？

是否有一个方便的 javascript 帮助程序库可以协调多个同时对数据库的 ajax 调用，并在所有 ajax 数据获取都返回其数据时调用指定的回调？我想向这个“协调器”或“代理”提交一份准备就绪的 ajax 调用字典，以及我的 WhenAllCompleted 回调函数。

用例很常见：在将数据库记录绑定到 UI 之前，必须填充所有外键数据关系的下拉列表，以便用户看到有意义的值而不是整数键通常存储在记录中。

如果已经有一个强大的标准库可以做到这一点，我宁愿不重新发明所有的管道代码来跟踪每个 ajax 请求的状态。

编辑： 这是描述我想要做什么的伪代码：

           when ajax1fetch is finished
           and
           ajax2fetch is finished
           and 
           ajax3fetch is finished
           and SELECT1 is populated
           and SELECT2 is populated
           and SELECT3 is populated
           bindRecordToUI()

在我重构代码以使用 $.when() 之前，我在 .ajax() 成功回调中获取数据，并在该回调中填充 SELECT；填充 SELECT 后，我将记录绑定到 UI。

如果我们为 $.when 提供 ajax 调用列表，则在 ajax 请求完成时调用 done 回调，这发生在填充 SELECT 之前（如果 SELECT 的项目列表很长）。

不知何故，我需要将 SELECT 元素的填充作为附加的 when 条件，并找到一种方法将 ajax 调用返回的数据路由到填充函数，如果不执行 SELECT-populate 函数在 .ajax 成功回调中。

Answer 1

你在 JS 中寻找promises。这是一个不错的框架Q。 allSettled() 函数就是你要找的。​​p>

Q.allSettled([saveToDisk(), saveToCloud()]).spread(function (disk, cloud) {
    console.log("saved to disk:", disk.state === "fulfilled");
    console.log("saved to cloud:", cloud.state === "fulfilled");
}).done();

代码取自API-reference

Answer 2

由于您已经在使用 jQuery，您可以使用 jQuery.when() 方法等待多个 Deferreds 完成。请注意，jQuery.ajax()（及其包装方法，如jQuery.get()）返回一个jqXHR 对象，它是Deferred 的一种类型。

您将从$.ajax 或等效调用中获得Deferreds，然后将这些全部传递给$.when。你会得到一个Promise，它基本上是一个只读的Deferred*。然后，您可以将完成/错误处理程序附加到此 Promise，一旦您传入的所有 Deferreds 被解决，或者如果您的任何一个 Deferreds 被拒绝，它就会被拒绝。

var def1 = $.ajax(),
    def2 = $.ajax({ /* some params */});

var masterPromise = $.when(def1, def2);

masterPromise.done(function() {
    console.log('def1 and def2 are done!');
});

---

• Deferred 允许附加各种完成和错误处理程序，以及解决和取消以及以其他方式控制异步操作​​。 Promise 只允许附加处理程序，并且不允许控制异步操作​​。您可以使用 Deferred.promise() 方法从 jQuery Deferred 获取 Promise。