18

En otra pregunta de StackOverflow en Español se hace referencia a llamadas AJAX anidadas y la respuesta sugiere usar promises en lugar de anidar llamadas AJAX. Y a partir de ahí me han surgido algunas dudas.

Nota: voy a usar notación de jQuery eliminando bastantes parámetros y renombrando las funciones para que sea más fácil de leer. No significa que esta pregunta sea sobre jQuery o AJAX en jQuery.

Básicamente lo que hace la pregunta es esto:

Estructura A

$.ajax({
    url: URL1,
    success: function() {
        a1();
        $.ajax({
            url: URL2,
            success: function() {
                a2();
            },
            error: function() {
                b2();
            }
        });
    },
    error: function() {
        b1();
    }
});

Y lo que se sugiere en la respuesta es algo como esto:

Estructura B

var promise = $.ajax({
    url: URL1,
    success: function() {
        a1();
    },
    error: function() {
        b1();
    }
});

promise.then(function() { 
    $.ajax({
        url: URL2,
        success: function() {
            a2();
        },
        error: function() {
            b2();
        }
    });
});

Y ahora mis dudas:

  • ¿La estructura A y B son equivalentes? ¿Cuál es la diferencia entre ellas?
  • ¿Hay alguna ventaja por utilizar una sobre la otra?
  • ¿Es alguno de los métodos recomendado sobre el otro?
2
  • Según recuerdo Promises esta diseñado para realizar multiples llamadas en paralelo algo similar a lo que realizarían multiples llamadas AJAX, el problema es que AJAX en ocasiones tiene problemas en cuanto a performance al realizar esto.
    – Jorgesys
    Commented el 2 feb. 2016 a las 23:09
  • 3
    @Elenasys promises permite tanto encadenamiento serializado como en paralelo, y la idea detrás de ellos es poder manejar los posibles errores que tenga ajax al realizar llamados en paralelo de forma más fácil Commented el 2 feb. 2016 a las 23:33

2 respuestas 2

17

La diferencia radica en la facilidad de mantenimiento, y en el manejo de errores. También es mucho mas fácil el debug

Promises te permite mantener inmutabilidad en tus métodos, derivado de la programación funcional, mientras que con callbacks es más imperativo.

Otra ventaja que tiene es que promises es nativo de JS, y a diferencia de la opción de Jquery, es un estándar.

También te evita escapar del callback hell XD introducir la descripción de la imagen aquí

Con relación con las estructuras que mencionas en tu pregunta la parte de promises la modificaría un poco para que fuera equivalente

new Promise(function(resolve, reject) {
      $.ajax({
          url: URL1,
          success: function(data) { // si recibo algún dato como parametro
            resolve(data); //Resuelvo la promesa (la cumplo) y con esto se puede recibir como parámetro 
            a1();
          },
          error: function(CausaDelError) {
            reject(CausaDelError); //marco la promesa como incumplida y paso como parámetro el porque no se cumplió
            b1();
          };
        })
        .then(function() { //Notese que no necesito declarar la variable
          $.ajax({
            url: URL2,
            success: function() {
              a2();
            },
            error: function() {
              b2();
            }
          });
        })
        .catch(function(error) {
          //Capturo los errores posibles en la primer promesa o en la segunda (then)
          console.log(error);
        });

Udacity tiene un curso gratuito muy corto que explica de forma muy sencilla y rápida promises

2
  • Buena explicación. Sobre lo de AJAX en jQuery, sólo use la notación en la pregunta, pero podría definir mi propia función con código nativo de JS.
    – Alvaro Montoro
    Commented el 2 feb. 2016 a las 23:53
  • 1
    +1 por lo de También te evita escapar del callback hell XD
    – Wilfredo
    Commented el 3 feb. 2016 a las 14:42
4

Esto no responde a ninguna de tus tres preguntas, pero como alternativa aquí tienes una herramineta nativa en JavaScript desde hace relativamente poco, Fetch API, la cual puede requerir de un polyfill para ciertos navegadores y utiliza Promises.

const url 		= 'https://api.myjson.com/bins/3ko1q',
      method 	= 'GET',
      headers   = new Headers({'Content-Type' : 'application/json'});
      
const req = new Request(url, { method, headers });

fetch(req)
  .then( res => res.ok ? res.json() : undefined )
  .then( data => JSON.stringify(data) )
  .then(alert)
  .catch(console.error.bind(console));

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.