如何执行许多ajax请求并使用jQuery $ .ajax仅在1个回调中获得结果 _jQuery开发

你是否曾经尝试过向服务器发出多个Ajax请求？如果你不知道如何正确处理它们(干净的代码, 可维护性等), 则此任务将变得非常混乱。对于” 初学者” , 以下示例可以解决问题：
注意：在此示例中, 为了防止CORS请求错误, 我们在每个原始URL之前使用cors-anywhere URL, 你需要使用自己的URL：

var $requestUrlExample = "https://cors-anywhere.herokuapp.com/http://jsfiddle.net/api/user/ourcodeworld/demo/list.json"; var $requestUrlTwo = "https://cors-anywhere.herokuapp.com/http://jsfiddle.net/api/user/ourcodeworld/demo/list.json?start=1& limit=1"; var $requestUrlThree = "https://cors-anywhere.herokuapp.com/https://api.github.com/repos/sdkcarlos/artyom.js"; $.getJSON($requestUrlExample, function(resp1){ $.getJSON($requestUrlTwo, function(resp2){ $.getJSON($requestUrlThree, function(resp3){ // Here all the responses will be available console.log(resp1); console.log(resp2); console.log(resp3); }); }); });

它的工作原理是, 记住一个简单的分层请求示例” 如果它是愚蠢的并且它有效, 那不是愚蠢” 。但是, 有一种更干净的方法来实现多个请求并仅通过一个回调处理它们。
在这种情况下, 我们将使用$ .when函数, when提供了一种基于零个或多个对象执行回调函数的方法, 这些对象通常代表延迟事件的Deferred对象。如果没有参数传递给jQuery.when(), 它将返回一个解决承诺。如果将单个Deferred传递给jQuery.when(), 则该方法将返回其Promise对象(Deferred方法的子集)。
在下面的示例中, 我们将对json格式的不同url执行3个json请求, 并且仅用1个回调即可处理所有内容。

var $requestUrlExample = "https://cors-anywhere.herokuapp.com/http://jsfiddle.net/api/user/ourcodeworld/demo/list.json"; var $requestUrlTwo = "https://cors-anywhere.herokuapp.com/http://jsfiddle.net/api/user/ourcodeworld/demo/list.json?start=1& limit=1"; var $requestUrlThree = "https://cors-anywhere.herokuapp.com/https://api.github.com/repos/sdkcarlos/artyom.js"; $.when($.getJSON($requestUrlExample), $.getJSON($requestUrlTwo), $.getJSON($requestUrlThree)).then(function (resp1, resp2, resp3) { // The request reponse will be retrieven respectively of the given order // Response structure : [responseContent, strinStatus("sucess" or "error"), xhrObject] console.log(resp1); // to retrieve the real content use resp[0] console.log(resp2); console.log(resp3); }).fail(function (problem) {// handle errors (some request has failed) console.log(problem); });

显然, 如果1个请求失败, 那么你将无法检索其他请求的结果, 而是使用when能够处理错误。播放以下包含先前代码的小提琴(导航至” 结果” 选项卡)：
使用when函数可使你的代码更简洁, 更紧凑。从jQuery V1.5开始, 此功能可用。你可以在此处阅读有关when函数的更多信息。
【如何执行许多ajax请求并使用jQuery $ .ajax仅在1个回调中获得结果】请注意, 你也可以使用$ .ajax({url：” mypath” })对象, 而不仅仅是$ .get, $ getJSON或$ .post函数。玩得开心！