Múltiples solicitudes Ajax simultáneas (con una devolución de llamada) en jQuery | Programar Plus

Digamos que hay una función en su sitio web que solo se usa el 5% del tiempo. Esa función requiere algo de HTML, CSS y JavaScript para funcionar. Así que decide que en lugar de tener ese HTML, CSS y JavaScript en la página directamente, va a usar Ajax cuando la función esté a punto de usarse.

Tendremos que hacer tres solicitudes de Ajax. Dado que no queremos mostrar nada al usuario hasta que la función esté lista (además, todos dependen unos de otros para funcionar correctamente), debemos esperar a que los tres estén completos antes de continuar.

¿Cuál es la mejor manera de hacer eso?

Las llamadas Ajax en jQuery proporcionan devoluciones de llamada:

$.ajax({
  statusCode: {
    url: "/feature",
    success: function() {
      // Ajax success
    }
  }
});

O la forma “Diferida”, esta vez usando una abreviatura $.get() método:

$.get("/feature/").done(function() {
  // Ajax success
});

Pero tenemos tres solicitudes de Ajax que debemos realizar, y queremos esperar a que las tres terminen antes de hacer algo, por lo que podría volverse bastante complicado en el terreno de la devolución de llamada:

// Get the HTML
$.get("/feature/", function(html) {

  // Get the CSS
  $.get("/assets/feature.css", function(css) {
    
    // Get the JavaScript
    $.getScript("/assets/feature.js", function() {

       // All is ready now, so...

       // Add CSS to page
       $("<style />").html(css).appendTo("head");

       // Add HTML to page
       $("body").append(html);

    });

  });

});

Esto espera con éxito hasta que todo esté listo antes de agregar algo a la página. Entonces, cuando el usuario ve algo, está listo para comenzar. Tal vez eso haga que algunos de ustedes sientan náuseas, pero he hecho cosas de esa manera antes. Al menos tiene sentido y funciona. ¿El problema? Es lento.

Una solicitud… esperar a que se haga… otra solicitud… esperar a que se haga… otra solicitud… esperar a que se haga… listo.

Sería más rápido si pudiéramos hacer:

Las tres solicitudes en paralelo… espere a que se hagan las tres… listo.

Podemos usar un poco de acción Diferida/Promesas para ayudar aquí. Estoy seguro de que esto es algo de JavaScript 101 para algunos de ustedes, pero este tipo de cosas me eludió durante mucho tiempo y las cosas más complejas de Promises todavía lo hacen.

En nuestro caso de uso simple, podemos usar jQuery $.when() método, que toma una lista de estos objetos “diferidos” (todos los métodos jQuery Ajax devuelven objetos diferidos) y luego proporciona una devolución de llamada única.

$.when(

  // Deferred object (probably Ajax request),

  // Deferred object (probably Ajax request),

  // Deferred object (probably Ajax request)

).then(function() {

  // All have been resolved (or rejected), do your thing

});

Entonces nuestro callback-hell se puede reescribir como:

$.when(
  // Get the HTML
  $.get("/feature/", function(html) {
    globalStore.html = html;
  }),

  // Get the CSS
  $.get("/assets/feature.css", function(css) {
    globalStore.css = css;
  }),

  // Get the JS
  $.getScript("/assets/feature.js")

).then(function() {

  // All is ready now, so...

  // Add CSS to page
  $("<style />").html(globalStore.css).appendTo("head");

  // Add HTML to page
  $("body").append(globalStore.html);

});

Otro caso de uso: corte de mostaza

Mi ejemplo de caso de uso anterior es una característica del 5%. Mantenga la página más clara para el 95 % de los usuarios que no usan la función y haga que sea un complemento relativamente rápido para aquellos que sí la usan.

Otra situación podría ser una situación de corte de mostaza en la que agrega funciones o contenido adicional a una página en ciertas situaciones, según lo decida. Tal vez hacer un matchMedia pruebe algunas consultas de medios y determine que la pantalla y las capacidades del dispositivo son tales que va a incluir algunos módulos adicionales. ¡Genial, hazlo con algunas llamadas Ajax paralelas!

(Visited 3 times, 1 visits today)