jQuery Promise es uno de los conceptos que cuesta más entender cuanto de trabajamos con Ajax. Sin embargo sino entendemos este concepto será muy difícil desarrollar aplicaciones Ajax que sean flexibles y reutilizables. Vamos a mostrar un ejemplo que nos ayude a entender mejor las cosas . Supongamos que disponemos de un servidor que nos devuelve datos a través de dos urls /datos1 y /datos2.
Si queremos acceder a los datos simplemente realizaremos dos peticiones peticiones Ajax .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#boton").click(function() {
var peticion1=$.get("http://localhost:8080/datos1",function(datos1) {
console.log(datos1)
});
var peticion2=$.get("http://localhost:8080/datos2",function(datos2) {
console.log(datos2)
});
});
});
</script>
<title>Promesas</title>
</head>
<body>
<input type="button" id="boton" value="pedirAjax"/>
</body>
</html>
El resultado será que en la consola se imprimirán los datos :
Ahora bien que pasaría si el tiempo de espera para la petición de dato1 fuera mucho más elevado que para dato2.
El resultado sería justamente el contrario:
El problema es que queremos imprimir primero dato1 que dato2 y tenemos dos peticiones asíncronas independientes. La primera solución que se suele usar es anidar las peticiones Ajax:
var peticion1=$.get("http://localhost:8080/datos1",function(datos1) {
console.log(datos1);
var peticion2=$.get("http://localhost:8080/datos2",function(datos2) {
console.log(datos2);
});
});
});
Los datos saldrán de forma correcta:
El problema es que hemos generado una dependencia entre la petición de /datos1 y la petición de /datos2 , algo que no debería existir y que elimina la posibilidad de reutilizar la petición de /datos1 ya que siempre se ejecutara /datos2.
Utilizando jQuery Promise
El concepto de jQuery Promise viene a solventar este problema. Una promesa es un objeto que se ejecutará en un futuro. Todas las peticiones Ajax son Promesas. El concepto de promesa pertenece al mundo de la programación asíncrona y no es exclusivo de jQuery. Para acceder al concepto de promesa con el código de jQuery deberemos realizar la siguiente modificación:
$("#boton").click(function() {
var promesa1=$.get("http://localhost:8080/datos1");
var promesa2=$.get("http://localhost:8080/datos2");
console.log(promesa1);
console.log(promesa2);
});
Ya disponemos de dos promesas , que como muestra la consola son Objetos de Javascript que incorporan una funcionalidad compleja.
Sin embargo las operaciones básicas no son complejas de abordar. En este caso podemos usar la función $.when de jQuery que se encarga de controlar la ejecución de varias promesas y cuando todas hayan finalizado imprime la información requerida en el orden solicitado.
$("#boton").click(function() {
var promesa1=$.get("http://localhost:8080/datos1");
var promesa2=$.get("http://localhost:8080/datos2");
$.when (promesa1, promesa2).done(function (dato1,dato2) {
console.log(dato1[0]);
console.log(dato2[0]);
})
});
El resultado saldrá en el orden solicitado:
Hemos conseguido desacoplar ambas peticiones Ajax e imprimir los resultados en el orden deseado. Las promesas son imprescindibles a la hora de desarrollar en el entorno de Javascript
Otros artículos relacionados : jQuery Ajax , jQuery On/Off , jQuery Promises API
Muy buen artículo, todo muy claro, gracias.
Gracias
[…] Otros artículos relacionados: Streams vs Promises , JavaScript Promises […]
[…] artículos relacionados: javascript ES6 Fetch API , javascript promises , JavaScript […]
[…] artículos relacionados: JavaScript Promises , JavaScript call vs apply , JavaScript […]
[…] artículos relacionados: jQuery Promises , JavaScript Prototypes , JavaScript ES6 […]
[…] artículos relacionados: JavaScript Promises , JavaScript Prototypes , JavaScript […]
[…] es una de las discusiones que se esta poniendo más de moda en el mundo de JavaScript. El uso de promises nunca ha sido sencillo y a mucha gente le cuesta introducir estos conceptos dentro de la […]
Hola Cecilio, hice un cambio en mi aplicación para usar tus recomendación en promise y ajax. Y tengo un problema. Para ponerte en contexto, los servlets a los que llego por medio de AJAX, tienen un cliente RESTful, de javax.ws.rs.client.*, pero cuando ejecuto entro en una pagina, que tiene 6 peticiones todas a distintos Servlets, se quedan “pegadas” todas y después de un rato, me arroja una excepción. Las peticiones nunca llegan el servicio REST. Hasta con 4 peticiones no falla… Aquí la excepción: Warning: StandardWrapperValve[RecargoServ]: Servlet.service() for servlet RecargoServ threw exception javax.ws.rs.ProcessingException: java.net.SocketException: Unexpected end of file from server… Read more »
No he conseguido entender muy bien como lo has programado 🙁 , revisa que todas las peticiones funcionan bien de forma individual
Perfecta la explicación.
Por casualidad llegue a este portal. Y veo que el autor es “Cecilio Álvarez Caules” wuaoo..
El autor de “Arquitectura Java Sólida” felicidades.
Como puedo suscribirme a tus publicaciones ???
Tienes un link abajo en el menu para hacerlo 😉
Interesante articulo, gracias!
gracias 🙂
Muy bueno, las promesas es algo con lo que se trabaja continuamente y te ayudan a no caer en el callback hell, creo que es importante mencionar a kriskowal al hablar de promesas (http://documentup.com/kriskowal/q/).
gracias por el aporte 🙂
Genial artículo. Muy útil la información
gracias 🙂