處理多個AJAX請求同步

Question

我有標籤和網址，這是我想擴大與相同的密鑰對象，但是通過AJAX調用獲得的實際內容替換URL，例如一個對象：

var requests = { 
    foo: 'http://url1.com', 
    bar: null, 
    baz: 'http://url2.com' 
} 

將擴大到物體像

{ 
    foo: 'content 1', 
    baz: 'content 2' 
} 

個人物品可以以任意順序進行擴展，但很明顯，我想跳過null值Ajax調用。主要的一點是，我也想有一個回調，將在對象完全展開後調用。

我想知道什麼是最優雅和簡單的解決方案（在jQuery中）？

謝謝！

Answer 1

您可能會使用jQuery的when()和then()函數進行ajax調用。

請注意，這仍然是異步。同步請求會鎖定您的瀏覽器直到完成。因此，最優雅的解決方案是做異步，並使用延遲/承諾。

var promises = []; 
 
var results = {} 
 
var requests = { 
 
    foo: 'http://jsonplaceholder.typicode.com/posts/1', 
 
    bar: null, 
 
    baz: 'http://jsonplaceholder.typicode.com/posts/2' 
 
} 
 

 
function getDataForKey(key, url) { 
 
    return $.ajax({ 
 
    url: url, 
 
    dataType: "json", 
 
    success: function(data) { 
 
     document.write(key + " done<br>"); 
 
     results[key] = data; 
 
    } 
 
    }); 
 
} 
 

 
for (var key in requests) { 
 
    if (!requests[key]) continue; 
 
    promises.push(getDataForKey(key, requests[key])); 
 
} 
 

 
// Apply each promise as an argument to jQuery's when() function 
 
$.when.apply(this, promises).then(function() { 
 
    // Here everything has finished. 
 
    document.write("all done!<br>"); 
 
    document.write("<pre>" + JSON.stringify(results, null, " ") + "</pre>"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>