Javascript - Last beliebige Anzahl von URLS mit $ .getJSON

Question

Nach this post wenn ich 2 Urls hatte, die ich parallel laden wollte, und dann die Daten verwenden aus ich es tun konnte wie folgt:

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

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

Wie könnte ich das auf eine beliebige Anzahl von URLs verallgemeinern, insbesondere auf eine Liste mit einigen URLs? Im Wesentlichen möchte ich eine Liste von URLs nehmen, die Funktion $ .getJSON auf jede URL abbilden, und sobald die Daten einer jeden URL abgerufen wurden, mache ich etwas mit den Daten.

Answer 1

Da $.when nicht eine Reihe von Versprechungen/deferreds nehmen, müssen Sie jedes Versprechen von $.getJSON() in ein Array zurück zu setzen und entweder verwenden .apply() auf $.when oder verwenden Sie die spread operator (...), wenn Targeting-kompatible Browser

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

Verwendung .apply()

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

Verwendung von Spread-Operator (...)

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

Und natürlich als pwolaq in den Kommentaren erwähnt könnten Sie einfach das Array Promise.all() passieren, wie es ein iterable Objekt Versprechungen nimmt

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

Answer 2

Es sieht aus wie jedes $.getJSON ist ein verzögertes Objekt. Sie geben diese "Versprechen" an die when-Funktion weiter, um sie auszuführen und nach Abschluss des Vorgangs an done zurückzurufen.

Wir werden zuerst die URLs Versprechen versprechen, indem Sie die getJSON Funktion an JavaScript-Array map Funktion höherer Ordnung übergeben.

Jetzt müssen wir when mit einer dynamischen Anzahl von Argumenten aufrufen. Hier kommt die apply Funktion zum Einsatz. Durch Aufrufen dieser Funktion mit deferred als zweites Argument ruft JS when(deferred[0], deferred[1], ...) auf.

Um die Ergebnisse in der done Funktion bekommen wir die handlichen arguments Variable verwenden können die Argumente an die done Funktion dynamisch übergeben zu bekommen.

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 
    } 
}); 

Danke für die interessante Frage! Hier leuchten dynamische Sprachen wie JavaScript.