Tableau de promesses

Question

Je travaille sur une pièce où je dois obtenir des données json à partir d'une API pour différentes villes et construire des DOM.

Jusqu'ici, j'ai été capable de faire les deux. Le seul problème est que le temps de réponse de l'API pour les différentes villes est différent. Donc, quand je construis le DOM, ils ne sont pas dans le même ordre que j'appelle la fonction. D'après ce dont je me souviens, je dois utiliser la promesse pour obtenir cet ordre. Mes questions sont maintenant:

1. Comment puis-je utiliser une série de promesses (puisque mon entrée variera).
2. Comment puis-je exécuter une série de promesses?

Mon code de travail à ce jour:

var base_path = "https://www.example.com/"; 
var cities = [ 
    "San_Francisco", 
    "Miami", 
    "New_Orleans", 
    "Chicago", 
    "New_York_City" 
]; 


function getData(city){ 
    var path = base_path+city+".json"; 

    $.getJSON(path,function(data) { 
    // build DOM 
    }); 
} 

for(var i=0;i<cities.length;i++) { 
    getData(cities[i]); 
} 

Merci!

Answer 1

Ceci est assez trivial à mettre en œuvre avec Promise.all().

const base_path = "https://www.example.com/" 
let cities = [ 
    "San_Francisco", 
    "Miami", 
    "New_Orleans", 
    "Chicago", 
    "New_York_City" 
] 

Promise.all(cities.map((city) => { 
    return fetch(`${base_path}${city}.json`).then(res => res.json()) 
})).then((data) => { 
    // Data is an array of all responses in the same order as the cities array 
}).catch((err) => { 
    // A request failed, handle the error 
}) 

La raison pour laquelle l'ordre du tableau data est préservée est parce que Promise.all() conserve le même ordre que le tableau original des promesses était dans les demandes sont exécutées en parallèle . J'ai utilisé le Fetch API ici au lieu de jQuery.