Javascript - 使用 $.getJson 加载任意数量的 URL答案

【问题标题】：Javascript - Load arbitrary number of URLS with $.getJsonJavascript - 使用 $.getJson 加载任意数量的 URL
【发布时间】：2016-07-26 06:10:30
【问题描述】：

根据this post，如果我有 2 个要并行加载的 url，然后使用来自的数据，我可以这样做：

var url1 = 'some-url';
var url2 = 'some-other-url';

$.when(
    $.getJSON(url1),
    $.getJSON(url2)
).done(function (result1, result2) {
    // code using two results
});

如何将其推广到任意数量的 url，尤其是包含一些 url 的列表？本质上，我想获取一个 URL 列表，将函数 $.getJSON 映射到每个 url，并在获取每个 url 的数据后对数据进行处理。

【问题讨论】：

标签： javascript

【解决方案1】：

由于$.when 不接受承诺/延迟数组，因此您需要将从$.getJSON() 返回的每个承诺放入一个数组中，并在$.when 上使用.apply() 或使用spread operator (@ 987654327@)，如果目标是兼容的浏览器

//map each url to a getJSON call
var urls = ["url","url","url"];
var proms = urls.map(url=>$.getJSON(url));

使用 .apply()

$.when.apply($,proms).then(function(data1,data2,data3){
   console.log("data: ",data1,data2,data3);
});

使用扩展运算符 (...)

$.when(...proms).then(function(...data){
   console.log("data: ",data[0],data[1],data[2]);
});

当然，正如 pwolaq 在 cmets 中提到的，您可以将数组传递给 Promise.all()，因为它确实需要一个可迭代的 Promise 对象

Promise.all(proms).then(function(data){
   console.log("data: ",data[0],data[1],data[2]);
});

【讨论】：

另一种解决方法是将数组与 ES6 Promise.all() 一起使用

【解决方案2】：

看起来每个$.getJSON 都是一个延迟对象。您将这些“承诺”传递给when 函数以执行它们并在它们完成后回调done。

我们要做的是首先通过将getJSON 函数传递给JavaScript 的数组map 高阶函数来将URL 映射到promise。

现在，我们需要使用动态数量的参数调用when。这就是apply 函数派上用场的地方。通过以deferred作为第二个参数调用这个函数，JS调用when(deferred[0], deferred[1], ...)。

要在done 函数中获取结果，我们可以使用方便的arguments 变量来动态获取传递给done 函数的参数。

var urls = ['some-url', 'some-other-url'];

//turn the URLS into promises that we'll get them
var deferred = urls.map($.getJSON);

//make the dynamic call to when
$.when.apply(this, deferred).done(function () { //
    // code using two results
    for(i in arguments) {
         var result = arguments[i];
         //do something with result
    }
});

感谢您提出有趣的问题！这确实是 JavaScript 等动态语言大放异彩的地方。

【讨论】：