Как выполнить много запросов ajax и получить результаты всего за 1 обратный вызов с помощью jQuery $ .ajax

Вы когда-нибудь пытались сделать несколько запросов AJAX на сервер? Эта задача становится действительно хаотичной, если вы не знаете, как правильно их обрабатывать (чистый код, удобство сопровождения и т. Д.). Для «новичка» следующий пример поможет:

Примечание. В этом примере мы используем URL-адрес cors -where перед каждым исходным URL-адресом, чтобы предотвратить ошибки запроса CORS. Вам необходимо использовать собственный 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, когда она обеспечивает способ выполнения функций обратного вызова на основе нуля или более объектов, обычно отложенных объектов, представляющих асинхронные события. Если в jQuery.when () не переданы аргументы, она вернет Решено обещание. Если одиночный Deferred передается в jQuery.when (), его объект Promise (подмножество методов Deferred) возвращается методом.

В следующем примере мы выполним 3 запроса json для разных URL-адресов в формате json и обработаем весь контент всего одним обратным вызовом.

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 запрос не удался, вы не можете получить результат других запросов, но используете, когда вы сможете обработать ошибку тоже. Поиграйте со следующей скрипкой, содержащей предыдущий код (перейдите на вкладку Result):

Использование функции when делает ваш код чище и компактнее. Эта функция доступна начиная с jQuery V1.5, вы можете узнать больше о когда функция здесь.

Обратите внимание, что вы можете использовать $.ajax({url:"mypath"}) объект тоже и не только $.get , $getJSON или же $.post функции. Повеселись !