处理多个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>