Cómo ejecutar muchas solicitudes ajax y obtener los resultados en solo 1 devolución de llamada con jQuery $ .ajax

¿Alguna vez ha intentado realizar varias solicitudes ajax al servidor? Esta tarea se vuelve realmente caótica si no sabe cómo manejarla correctamente (código limpio, mantenibilidad, etc.). Para un "principiante", el siguiente ejemplo funcionaría:

Nota: usamos la URL cors-anywhere antes de cada URL original para evitar errores de solicitud CORS en este ejemplo, debes usar tus propias 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){
            // Aquí todas las respuestas estarán disponibles
            console.log(resp1);
            console.log(resp2);
            console.log(resp3);
        });
    });
});

Y funciona, recuerde  "Si es estúpido y funciona, no es estúpido" , un simple ejemplo de solicitud jerárquica. Sin embargo, hay una forma más limpia de lograr múltiples solicitudes y manejarlas con una sola devolución de llamada.

En este caso usaremos la función $ .when, cuando proporciona una forma de ejecutar funciones de devolución de llamada basadas en cero o más objetos, generalmente objetos diferidos que representan eventos asincrónicos. Si no se pasan argumentos a jQuery.when (), devolverá un Promesa resuelta . Si se pasa un único Deferred a jQuery.when (), el método devuelve su objeto Promise (un subconjunto de los métodos Deferred).

 En el siguiente ejemplo, ejecutaremos 3 solicitudes json a diferentes URL con formato json y manejaremos todo el contenido con solo 1 devolución de llamada.

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) {
    // La respuesta a la solicitud se recuperará respectivamente del orden dado
    // Estructura de respuesta: [responseContent,strinStatus("sucess" or "error"),xhrObject]
    console.log(resp1); // para recuperar el uso real del contenido resp[0]
    console.log(resp2);
    console.log(resp3);
}).fail(function (problem) {
    // manejar errores (alguna solicitud ha fallado)
    console.log(problem);
});

Obviamente, si 1 solicitud falla, entonces no puede recuperar el resultado de las otras solicitudes, pero usando cuando también podrá manejar el error. Juega con el siguiente violín que contiene el código anterior (navega a la pestaña de Resultados):

El uso de la función when hace que su código sea más limpio y compacto. Esta función está disponible desde jQuery V1.5, puede leer más sobre cuándo funciona aquí .

Tenga en cuenta que puede utilizar $.ajax({url:"mypath"}) objeto también y no sólo $.get$getJSON$.post funciones.

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable