angularjs - example - Espera a que todas las promesas se resuelvan

promesas en angular 6

Question

Así que tengo una situación en la que tengo múltiples cadenas de promesa de longitud desconocida. Quiero que se ejecute alguna acción cuando se hayan procesado todas las CADENAS. ¿Es eso posible? Aquí hay un ejemplo:

app.controller(''MainCtrl'', function($scope, $q, $timeout) {
    var one = $q.defer();
    var two = $q.defer();
    var three = $q.defer();

    var all = $q.all([one.promise, two.promise, three.promise]);
    all.then(allSuccess);

    function success(data) {
        console.log(data);
        return data + "Chained";
    }

    function allSuccess(){
        console.log("ALL PROMISES RESOLVED")
    }

    one.promise.then(success).then(success);
    two.promise.then(success);
    three.promise.then(success).then(success).then(success);

    $timeout(function () {
        one.resolve("one done");
    }, Math.random() * 1000);

    $timeout(function () {
        two.resolve("two done");
    }, Math.random() * 1000);

    $timeout(function () {
        three.resolve("three done");
    }, Math.random() * 1000);
});

En este ejemplo, configuré $q.all() para las promesas uno, dos y tres que se resolverán en algún momento al azar. Luego agrego promesas en los extremos de uno y tres. Quiero que all resuelva cuando se hayan resuelto todas las cadenas. Aquí está la salida cuando ejecuto este código:

one done 
one doneChained
two done
three done
ALL PROMISES RESOLVED
three doneChained
three doneChainedChained 

¿Hay alguna manera de esperar a que las cadenas se resuelvan?

Answer 1

Quiero que todo se resuelva cuando se hayan resuelto todas las cadenas.

Claro, solo pasa la promesa de cada cadena al all() lugar de las promesas iniciales:

$q.all([one.promise, two.promise, three.promise]).then(function() {
    console.log("ALL INITIAL PROMISES RESOLVED");
});

var onechain   = one.promise.then(success).then(success),
    twochain   = two.promise.then(success),
    threechain = three.promise.then(success).then(success).then(success);

$q.all([onechain, twochain, threechain]).then(function() {
    console.log("ALL PROMISES RESOLVED");
});

Answer 2

Hay una manera. $q.all(...

Usted puede verificar los siguientes productos:

http://jsfiddle.net/ThomasBurleson/QqKuk/

http://denisonluz.com/blog/index.php/2013/10/06/angularjs-returning-multiple-promises-at-once-with-q-all/

Answer 3

La respuesta aceptada es correcta. Me gustaría dar un ejemplo para explicarlo un poco a aquellos que no están familiarizados con la promise .

Ejemplo:

En mi ejemplo, necesito reemplazar los atributos src de las etiquetas img con diferentes URL espejo si están disponibles antes de mostrar el contenido.

var img_tags = content.querySelectorAll(''img'');

function checkMirrorAvailability(url) {

    // blah blah 

    return promise;
}

function changeSrc(success, y, response) {
    if (success === true) {
        img_tags[y].setAttribute(''src'', response.mirror_url);
    } 
    else {
        console.log(''No mirrors for: '' + img_tags[y].getAttribute(''src''));
    }
}

var promise_array = [];

for (var y = 0; y < img_tags.length; y++) {
    var img_src = img_tags[y].getAttribute(''src'');

    promise_array.push(
        checkMirrorAvailability(img_src)
        .then(

            // a callback function only accept ONE argument. 
            // Here, we use  `.bind` to pass additional arguments to the
            // callback function (changeSrc).

            // successCallback
            changeSrc.bind(null, true, y),
            // errorCallback
            changeSrc.bind(null, false, y)
        )
    );
}

$q.all(promise_array)
.then(
    function() {
        console.log(''all promises have returned with either success or failure!'');
        render(content);
    }
    // We don''t need an errorCallback function here, because above we handled
    // all errors.
);

Explicación:

De AngularJS docs :

El método then :

then (successCallback, errorCallback, notifyCallback) , independientemente de cuándo se haya resuelto o se haya resuelto o se haya rechazado la promesa, luego llama asincrónicamente a una de las devoluciones de llamada correctas o erróneas tan pronto como el resultado esté disponible. Las devoluciones de llamada se invocan con un único argumento : el motivo de resultado o rechazo.

$ q.all (promesas)

Combina múltiples promesas en una única promesa que se resuelve cuando se resuelven todas las promesas de entrada.

Las promises param pueden ser una serie de promesas.

Acerca de bind() , más información aquí: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Answer 4

Puede usar "esperar" en una "función asíncrona" .

app.controller(''MainCtrl'', async function($scope, $q, $timeout) {
  ...
  var all = await $q.all([one.promise, two.promise, three.promise]); 
  ...
}

NOTA: No estoy 100% seguro de que pueda llamar a una función asíncrona desde una función que no sea asincrónica y que tenga los resultados correctos.

Dicho esto, esto nunca se usará en un sitio web. Pero para la prueba de carga / prueba de integración ... tal vez.

Código de ejemplo:

async function waitForIt(printMe) {
  console.log(printMe);
  console.log("..."+await req());
  console.log("Legendary!")
}

function req() {
  
  var promise = new Promise(resolve => {
    setTimeout(() => {
      resolve("DARY!");
    }, 2000);
    
  });

    return promise;
}

waitForIt("Legen-Wait For It");

Answer 5

Recientemente tuve este problema pero con un número desconocido de promesas. Se jQuery.map() usando jQuery.map() .

function methodThatChainsPromises(args) {

    //var args = [
    //    ''myArg1'',
    //    ''myArg2'',
    //    ''myArg3'',
    //];

    var deferred = $q.defer();
    var chain = args.map(methodThatTakeArgAndReturnsPromise);

    $q.all(chain)
    .then(function () {
        $log.debug(''All promises have been resolved.'');
        deferred.resolve();
    })
    .catch(function () {
        $log.debug(''One or more promises failed.'');
        deferred.reject();
    });

    return deferred.promise;
}