Comment synchroniser une séquence de promesses?

voici quelques exemples simples pour la séquence à travers un tableau qui exécute chaque opération asynchrone en série (l'une après l'autre).

supposons que vous avez un tableau d'éléments:

var arr = [...];

et, vous voulez effectuer une opération asynchrone spécifique sur chaque élément du tableau, une à la fois en série de sorte que la prochaine opération ne commence pas avant que la précédente ne soit terminée.

et, supposons que vous ayez une fonction de retour de promesse pour le traitement de l'un des éléments du tableau:

Itération Manuelle

function processItem(item) {
    // do async operation and process the result
    // return a promise
}

Ensuite, vous pouvez faire quelque chose comme ceci:

function processArray(array, fn) {
    var index = 0;

    function next() {
        if (index < array.length) {
            fn(array[index++]).then(next);
        }
    }
    next();
}

processArray(arr, processItem);

Itération Manuelle Retour De La Promesse

si vous vouliez qu'une promesse vous revienne de processArray() pour que vous sachiez quand il a été fait, vous pouvez ajouter ceci à elle:

function processArray(array, fn) {
    var index = 0;

    return new Promise(function(resolve, reject) {

        function next() {
            if (index < array.length) {
                fn(array[index++]).then(next, reject);
            } else {
                resolve();
            }
        }
        next();
    }
}

processArray(arr, processItem).then(function() {
    // all done here
}, function(reason) {
    // rejection happened
});

Note: cela stoppera la chaîne sur le premier rejet et passera cette raison de nouveau au processArray retourné promettre.

Itération .réduire()

Si vous vouliez faire plus de travail avec des promesses, vous pourriez chaîne de toutes les promesses:

function processArray(array, fn) {
   return array.reduce(function(p, item) {
       return p.then(function() {
          return fn(item);
       });
   }, Promise.resolve());
}

processArray(arr, processItem).then(function(result) {
    // all done here
}, function(reason) {
    // rejection happened
});

Note: Ceci arrêtera la chaîne sur le premier rejet et ramènera cette raison à la promesse retournée de processArray().

pour un scénario de succès, la promesse revient de processArray() sera résolu avec la dernière résolu valeur de votre fn rappel. Si vous voulez accumuler une liste de résultats et résoudre avec cela, vous pouvez collecter les résultats dans un tableau de fermeture de fn et continuer à retourner ce tableau à chaque fois donc la résolution finale serait un tableau de résultats.

Itération .reduce () qui se résout avec Array

Et, depuis, il semble maintenant évident que vous voulez la dernière promesse résultat à un tableau de données (dans l'ordre), voici une révision de la solution précédente qui produit:

function processArray(array, fn) {
   var results = [];
   return array.reduce(function(p, item) {
       return p.then(function() {
           return fn(item).then(function(data) {
               results.push(data);
               return results;
           });
       });
   }, Promise.resolve());
}

processArray(arr, processItem).then(function(result) {
    // all done here
    // array of data here in result
}, function(reason) {
    // rejection happened
});

démo de travail: http://jsfiddle.net/jfriend00/h3zaw8u8/

Et un travail de démonstration qui montre un rejet: http://jsfiddle.net/jfriend00/p0ffbpoc/

Itération .réduire() qui se Résout Avec Tableau avec retard

Et, si vous souhaitez insérer un petit délai entre les opérations:

function delay(t, v) {
    return new Promise(function(resolve) {
        setTimeout(resolve.bind(null, v), t);
    });
}

function processArrayWithDelay(array, t, fn) {
   var results = [];
   return array.reduce(function(p, item) {
       return p.then(function() {
           return fn(item).then(function(data) {
               results.push(data);
               return delay(t, results);
           });
       });
   }, Promise.resolve());
}

processArray(arr, 200, processItem).then(function(result) {
    // all done here
    // array of data here in result
}, function(reason) {
    // rejection happened
});

itération avec la bibliothèque de promesses Bluebird

la bibliothèque de promesses Bluebird a beaucoup de contrôle de la concurrence les fonctionnalités intégrées. Par exemple, pour séquencer une itération à travers un tableau, vous pouvez utiliser Promise.mapSeries().

Promise.mapSeries(arr, function(item) {
    // process each individual item here, return a promise
    return processItem(item);
}).then(function(results) {
    // process final results here
}).catch(function(err) {
    // process array here
});

ou pour insérer un délai entre les itérations:

Promise.mapSeries(arr, function(item) {
    // process each individual item here, return a promise
    return processItem(item).delay(100);
}).then(function(results) {
    // process final results here
}).catch(function(err) {
    // process array here
});

Using ES7 async / wait

si vous codez dans un environnement qui supporte async / wait, vous pouvez aussi utiliser unfor boucle, puis await une promesse dans la boucle et il causera le for boucle pour s'arrêter jusqu'à ce qu'une promesse soit résolue avant de continuer. Ce sera séquencez efficacement vos opérations asynchrones pour que la prochaine ne commence pas avant que la précédente ne soit terminée.

async function processArray(array, fn) {
    let results = [];
    for (let i = 0; i < array.length; i++) {
        let r = await fn(array[i]);
        results.push(r);
    }
    return results;    // will be resolved value of promise
}

// sample usage
processArray(arr, processItem).then(function(result) {
    // all done here
    // array of data here in result
}, function(reason) {
    // rejection happened
});

---

pour info, je pense que mon processArray() fonction ici est très similaire à Promise.map() dans la bibliothèque de promesses Bluebird qui prend un tableau et une fonction de production de promesse et renvoie une promesse qui se résout avec un tableau de résultats résolus.

---

@vitaly - t-voici quelques commentaires plus détaillés sur votre approche. Vous pouvez utiliser le code qui vous semble le plus approprié. Quand j'ai commencé à utiliser des promesses, j'ai eu tendance à utiliser les promesses uniquement pour les choses les plus simples qu'ils ont faites et écrire beaucoup de la logique moi-même quand un usage plus avancé des promesses pourrait faire beaucoup plus de lui pour moi. Vous utilisez seulement ce que vous êtes pleinement à l'aise avec et au-delà de cela, vous préférez voir votre propre code que vous connaissez intimement. C'est probablement la nature humaine.

Je suggérerai que comme j'ai compris de plus en plus de ce que les promesses peuvent faire pour moi, j'aime maintenant écrire du code qui utilise plus de fonctionnalités avancées des promesses et il me semble parfaitement naturel et je me sens comme je construis sur une infrastructure bien testée qui a beaucoup de fonctionnalités utiles. Je vous demande seulement de garder l'esprit ouvert alors que vous apprenez de plus en plus à potentiellement aller dans cette direction. Je suis d'avis que c'est une orientation utile et productive de migrer au fur et à mesure que votre compréhension s'améliore.

voici quelques points spécifiques de commentaires sur votre approche:

Vous créez des promesses dans sept lieux

comme contraste dans les styles, mon code n'a que deux les endroits où j'ai choisi de créer une nouvelle promesse - une fois dans l'usine de la fonction et une fois pour initialiser le .reduce() boucle. Partout ailleurs, je ne fais que construire sur les promesses déjà créées en les enchaînant ou en leur rendant des valeurs ou en les rendant directement. Votre code a sept des endroits uniques où vous créez une promesse. Maintenant, un bon codage n'est pas un concours pour voir comment peu d'endroits vous pouvez créer une promesse, mais cela pourrait indiquer la différence dans l'effet de levier les promesses qui sont déjà créées par rapport aux conditions de test et de création de nouvelles promesses.

Jetez-la sécurité est une fonctionnalité très utile

les promesses sont sans danger. Cela signifie qu'une exception au sein d'une promesse gestionnaire rejeter automatiquement cette promesse. Si vous voulez juste que l'exception devienne un rejet, alors c'est une fonctionnalité très utile pour en profiter. En fait, vous constaterez que se jeter soi-même est un moyen utile de rejeter de l'intérieur d'un handler sans créer encore une autre promesse.

Beaucoup Promise.resolve() ou Promise.reject() est probablement une opportunité de simplification

si vous voyez du code avec beaucoup de Promise.resolve() ou Promise.reject() déclarations, alors il y a probablement des occasions de mieux tirer parti des promesses existantes plutôt que de créer toutes ces nouvelles promesses.

Distribution à une Promesse

si vous ne savez pas si quelque chose a retourné une promesse, alors vous pouvez la lancer à une promesse. La bibliothèque promise vérifiera alors elle-même si c'est une promesse ou non et même si c'est le genre de promesse qui correspond à la bibliothèque promise que vous utilisez et, si ce n'est pas le cas, l'enveloppera dans une. Cela peut sauver réécrire un beaucoup de cette logique de vous-même.

Contrat de Retour d'une Promesse

dans de nombreux cas de nos jours, il est tout à fait viable d'avoir un contrat pour une fonction qui peut faire quelque chose d'asynchrone pour rendre une promesse. Si la fonction veut juste faire quelque chose de synchrone, alors elle peut simplement retourner une promesse résolue. Vous semblez vous sentir comme ceci est onéreux, mais c'est certainement la façon dont le vent souffle et j'écris déjà beaucoup de code qui exige que et il se sent très naturel une fois que vous vous familiariser avec les promesses. Il abstraction de savoir si l'opération de synchronisation ou asynchrone, et l'appelant n'a pas à savoir ou à faire quelque chose de spécial. C'est une belle utilisation de promesses.

la fonction factory peut être écrite pour créer une seule promesse

la fonction factory peut être écrite pour créer une seule promesse puis la résoudre ou la rejeter. Ce style rend également jeter sûr de sorte que toute exception produite dans la fonction d'usine devient automatiquement un rejet. Il fait également le contrat de toujours retourner une promesse automatique.

alors que je réalise que cette fonction d'usine est une fonction de mise en place (elle ne fait même rien async), j'espère que vous pouvez voir le style pour le considérer:

function factory(idx) {
    // create the promise this way gives you automatic throw-safety
    return new Promise(function(resolve, reject) {
        switch (idx) {
            case 0:
                resolve("one");
                break;
            case 1:
                resolve("two");
                break;
            case 2:
                resolve("three");
                break;
            default:
                resolve(null);
                break;
        }
    });
}

si l'une de ces opérations était async, alors ils pourraient simplement retourner leurs propres promesses qui seraient automatiquement enchaînées à la seule promesse centrale comme ceci:

function factory(idx) {
    // create the promise this way gives you automatic throw-safety
    return new Promise(function(resolve, reject) {
        switch (idx) {
            case 0:
                resolve($.ajax(...));
            case 1:
                resole($.ajax(...));
            case 2:
                resolve("two");
                break;
            default:
                resolve(null);
                break;
        }
    });
}

utiliser un gestionnaire de rejet pourreturn promise.reject(reason) n'est pas nécessaire

Quand vous avez ce corps de code:

    return obj.then(function (data) {
        result.push(data);
        return loop(++idx, result);
    }, function (reason) {
        return promise.reject(reason);
    });

le gestionnaire de rejets n'ajoute aucune valeur. Vous pouvez au lieu de simplement faire ceci:

    return obj.then(function (data) {
        result.push(data);
        return loop(++idx, result);
    });

Vous êtes déjà en retournant le résultat de obj.then(). Si obj rejette ou si quelque chose est enchaîné à obj ou retourné à partir de, puis .then() gestionnaire rejette, puis obj le rejettera. Si vous pas besoin de créer une nouvelle promesse avec le rejet. Le code plus simple sans le gestionnaire de rejets fait la même chose avec moins de code.

---

Voici une version dans l'architecture générale de votre code qui tente d'intégrer la plupart de ces idées:

function factory(idx) {
    // create the promise this way gives you automatic throw-safety
    return new Promise(function(resolve, reject) {
        switch (idx) {
            case 0:
                resolve("zero");
                break;
            case 1:
                resolve("one");
                break;
            case 2:
                resolve("two");
                break;
            default:
                // stop further processing
                resolve(null);
                break;
        }
    });
}


// Sequentially resolves dynamic promises returned by a factory;
function sequence(factory) {
    function loop(idx, result) {
        return Promise.resolve(factory(idx)).then(function(val) {
            // if resolved value is not null, then store result and keep going
            if (val !== null) {
                result.push(val);
                // return promise from next call to loop() which will automatically chain
                return loop(++idx, result);
            } else {
                // if we got null, then we're done so return results
                return result;
            }
        });
    }
    return loop(0, []);
}

sequence(factory).then(function(results) {
    log("results: ", results);
}, function(reason) {
    log("rejected: ", reason);
});

démo de travail:http://jsfiddle.net/jfriend00/h3zaw8u8/

Quelques commentaires à propos de cette oeuvre:

1. Promise.resolve(factory(idx)) essentiellement convertit le résultat de factory(idx) pour une promesse. Si c'était juste une valeur, alors cela devient une promesse résolue avec cette valeur de retour comme valeur de résolution. Si c'était déjà une promesse, elle est liée à cette promesse. Ainsi, il remplace tout votre code de vérification de type sur la valeur de retour du factory() fonction.

2. la fonction factory indique que c'est fait en retournant null ou une promesse qui est de la valeur résolue finit par être null. Le ci-dessus en fonte établit la correspondance entre ces deux conditions et le même code résultant.

3. la fonction factory saisit automatiquement les exceptions et les transforme en rejets qui sont alors traités automatiquement par sequence() fonction. C'est un avantage significatif de laisser des promesses faire beaucoup de votre manipulation d'erreur si vous voulez juste avorter le traitement et alimenter l'erreur en retour sur la première exception ou le rejet.

4. la fonction d'usine dans ce la mise en œuvre peut retourner soit une promesse, soit une valeur statique (pour une opération synchrone) et elle fonctionnera très bien (selon votre demande de conception).

5. Je l'ai testé avec une exception lancée dans la fonction de rappel de promesse dans la fonction d'usine et il ne fait que rejeter et propager cette exception en arrière pour rejeter la promesse de séquence avec l'exception comme raison.

6. il utilise une méthode similaire à vous (sur le but, en essayant de restez avec votre architecture générale) pour enchaîner plusieurs appels à loop().