6

He mirado en su API y en este ejemplo pero no logro comprender su uso bien.

var def1 = $.Deferred();
var def2 = $.Deferred();
var def3 = $.Deferred();

var p1 = def1.promise();
var p2 = def2.promise();
var p3 = def3.promise();


$.when(p1, p2, p3).done(function(rs1, rs2, rs3) {
  LOG('When complete: '+rs1+', '+rs2+', '+rs3); // Results are in the order of the promises, regardless of the order they resolved in
});

def1.resolve('foo');
def3.resolve('bar');

setTimeout(function() {
  def2.resolve('AJAX!'); // No output is sent until this one returns
}, 2000);


function LOG(msg) {
  $('#log').append('<p>'+msg+'</p>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="details">
  An example of using <tt>when()</tt> to wait for all promises
</div>
<div id="log"></div>

¿Alguien sabe como funciona?

1

1 respuesta 1

4

Como suele ser habitual en jQuery, el comportamiento de la función when varía según los parámetros usados, pero en el caso que planteas es igual al de Promise.all:

let p1= new Promise(function (resolver) {
  setTimeout(()=> resolver('medio segundo'), 500);
});
let p2= new Promise(function (resolver) {
  setTimeout(()=> resolver('1 segundo'), 1000);
});
let p3= new Promise(function (resolver) {
  setTimeout(()=> resolver('2 segundos'), 2000);
});

$.when(p1,p2,p3).then( (r1,r2,r3) => {
  console.log('Todo resuelto:',r1,r2,r3);
});
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Es decir, agrupa promesas y crea una nueva promesa que se resolverá cuando todas las promesas agrupadas se hayan resuelto.

Es útil, por ejemplo, cuando necesitas hacer varias llamadas AJAX y necesitas que todas se completen antes de realizar una acción, pero no quieres encadenarlas porque se pueden ejecutar en paralelo. De este modo ganas tiempo y el código queda más limpio:

let peticion1 = $.ajax(....);
let peticion2 = $.ajax(...);

$.when(peticion1,peticion2).then(function (respuesta1,respuesta2) { ... });

Su equivalente con Javascript vanilla sería (nótese los corchetes, los parámetros se agrupan en un array):

let peticion1=fetch(...);
let peticion2=fetch(...);

Promise.all([peticion1, peticion2]). then(function ([res1,res2]) => {...});

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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