Javascript-使用$.getJson加载任意数量的URLS

Javascript - Load arbitrary number of URLS with $.getJson

本文关键字：URLS 任意数 加载 使用 getJson Javascript-      更新时间：2023-09-26

根据这篇文章，如果我有两个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的数据，就对数据进行处理。

由于$.when不接受promise/deferred数组，您需要将从$.getJSON()返回的每个promise放入一个数组中，并在$.when上使用.apply（）或使用排列运算符（...）（如果目标是兼容的浏览器）

//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在评论中提到的那样，您可以将数组传递给Promise.all（），因为它确实接受了promise的可迭代对象

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

看起来每个$.getJSON都是一个延迟对象。您将这些"promise"传递给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这样的动态语言真正的闪光点。

相关文章：