數組承諾

Question

我正在研究一個片段，我必須從不同城市的API獲取json數據並構建DOM。

到目前爲止，我已經能夠做到這一點。唯一的問題是不同城市的API響應時間不同。所以，當我構建DOM時，它們與我稱之爲函數的順序不同。從我記得我需要使用諾言來得到它的順序。 我現在的問題是：

1. 如何使用承諾數組（因爲我的輸入會有所不同）。
2. 另外我該如何執行一組promise？到目前爲止

我的工作代碼：

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

謝謝！

Answer 1

這是相當瑣碎與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 
}) 

的data排列順序被保存的原因是因爲Promise.all()保持相同的順序承諾的原陣列中的請求並行執行。我在這裏使用了Fetch API而不是jQuery。