如何从 jQuery.when() 获得一致的参数，无论是单个 Deferred 传递给它还是多个

如何解决如何从 jQuery.when() 获得一致的参数，无论是单个 Deferred 传递给它还是多个

我正在使用 jQuery.when() 对 JSON API 进行分页调用。我不知道分页会进行多少次调用，但我需要将结果连接到一个数组中。我遇到的问题是 jQuery.when() 的行为取决于是单个延迟/承诺参数被传递，还是多个参数被传递。根据{{​​3}}：

• 如果将单个 Deferred 传递给 jQuery.when()，则其 Promise 对象 （Deferred 方法的一个子集）由方法返回。
• 在 将多个 Deferred 对象传递给 jQuery.when() 的情况下， 方法从一个新的“主”延迟对象返回承诺 跟踪它已通过的所有 Deferred 的聚合状态。

这是带有多个参数的示例：

var url = 'https://jsonplaceholder.typicode.com/todos';
var requests = [$.ajax(url),$.ajax(url)];

$.when.apply($,requests).then(function(a,b,c) {
  console.log('a',a);
  console.log('b',b);
  console.log('c',c);
}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

注意，在这种情况下，回调中的参数是：

• a：包含 3 个项目的数组（JSON 响应、字符串 'success'、jQuery 对象）
• b：包含 3 个项目的数组（JSON 响应、字符串 'success'、jQuery 对象）
• c：未定义

如果我将第三个请求传递给 when()，那么 c 将是其结果。无论我添加多少，它都会表现一致。

现在看看当我只将一个请求传递给 when() 方法时会发生什么：

var url = 'https://jsonplaceholder.typicode.com/todos';
var requests = [$.ajax(url)]; // NOTE ONLY ONE

$.when.apply($,c);
}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在这种情况下，回调的参数不遵循与上述相同的模式。现在他们是：

• a：JSON 响应
• b: 字符串'成功'
• c: jQuery 对象

有没有一种干净的方法可以做到这一点，无论我传递给 when() 多少个参数，我都能获得一致的行为？

我能想到的一种获得一致行为的笨拙方法是将额外的虚拟数组传递给 when，以便它始终以多种方式运行，如下所示：

var url = 'https://jsonplaceholder.typicode.com/todos';
var requests = [[[]],$.ajax(url)]; // Note first argument
  
$.when.apply($,c);
}); 

只是想知道是否有更清洁的方法。

解决方法

对于像这样的异步操作你想要的逻辑，我会放弃 jQuery 的实现并使用 Promise.all 来代替：

var url = 'https://jsonplaceholder.typicode.com/todos';
var requests = [$.ajax(url)]; // NOTE ONLY ONE

Promise.all(requests).then(([a]) => {
  console.log('a',a);
});
// .catch(handleErrors);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

使用 Promise.all，无论传入的数组中有多少项，.then 回调中的一个数组参数中都会有相同数量的项 - 无论是 1 个请求还是 10 个请求.

这适用于 Promise.all，因为 jQuery 对象是 thenables。