Вузол JS Promise.all і forEach


120

У мене є структура схожа на масив, який розкриває методи асинхронізації. Метод async викликає структури масиву повернення, які, в свою чергу, розкривають більше методів асинхронізації. Я створюю ще один об'єкт JSON для зберігання значень, отриманих з цієї структури, тому мені потрібно бути обережним щодо відстеження посилань у зворотному звороті.

Я зашифрував грубе рішення, але хотів би дізнатися більш ідіоматичне чи чисте рішення.

  1. Візерунок повинен бути повторюваним для n рівнів гніздування.
  2. Мені потрібно використовувати promis.all або якусь подібну методику, щоб визначити, коли вирішувати рутинну процедуру.
  3. Не кожен елемент обов'язково повинен включати виклик асинхронізації. Тож у вкладеному обещанні. Я не можу просто робити завдання для своїх елементів масиву JSON на основі індексу. Тим не менш, мені потрібно використовувати щось на зразок promis.all у вкладеному forEach, щоб переконатися, що всі властивості були виконані до вирішення вкладеного розпорядку.
  4. Я використовую лінійку з обіцянками синьої пташки, але це не є вимогою

Ось частковий код -

var jsonItems = [];

items.forEach(function(item){

  var jsonItem = {};
  jsonItem.name = item.name;
  item.getThings().then(function(things){
  // or Promise.all(allItemGetThingCalls, function(things){

    things.forEach(function(thing, index){

      jsonItems[index].thingName = thing.name;
      if(thing.type === 'file'){

        thing.getFile().then(function(file){ //or promise.all?

          jsonItems[index].filesize = file.getSize();

Це посилання на робоче джерело, яке я хочу вдосконалити. github.com/pebanfield/change-view-service/blob/master/src/…
користувач3205931

1
Я бачу у зразку, яким ви користуєтеся bluebird, bluebird насправді робить ваше життя ще простішим із Promise.map(паралельним) та Promise.each(послідовним) у цьому випадку, також примітка Promise.deferзастаріла - код у моїй відповіді показує, як цього уникнути, повертаючи обіцянки. Обіцянки стосуються повернених значень.
Бенджамін Грюнбаум

Відповіді:


368

Це досить просто з деякими простими правилами:

  • Щоразу, коли ви створюєте обіцянку в папці then, поверніть її - будь-яка обіцянка, яку ви не повернете, не чекатиме на вулиці.
  • Щоразу, коли ви створюєте кілька обіцянок, .allїх - таким чином, він чекає всіх обіцянок і жодна з них не помиляється жодної помилки.
  • Щоразу, коли ви гніздитесь then, зазвичай можна повернутися посередині - thenланцюги, як правило, не більше 1 рівня.
  • Щоразу, коли ви виконуєте IO, він повинен бути з обіцянкою - або він повинен бути обіцяним, або він повинен використовувати обіцянку, щоб сигналізувати про його завершення.

І кілька порад:

  • Картографування краще проводити за допомогою, .mapніж за допомогоюfor/push - якщо ви зіставляєте значення за допомогою функції, mapдозволяє вам коротко висловити поняття застосування дій по черзі та агрегування результатів.
  • Паралельність краща за послідовне виконання, якщо вона безкоштовна - краще виконувати речі одночасно і чекати їх, Promise.allніж виконувати речі одна за одною - кожна чекає до наступної.

Гаразд, почнемо:

var items = [1, 2, 3, 4, 5];
var fn = function asyncMultiplyBy2(v){ // sample async action
    return new Promise(resolve => setTimeout(() => resolve(v * 2), 100));
};
// map over forEach since it returns

var actions = items.map(fn); // run the function over all items

// we now have a promises array and we want to wait for it

var results = Promise.all(actions); // pass array of promises

results.then(data => // or just .then(console.log)
    console.log(data) // [2, 4, 6, 8, 10]
);

// we can nest this of course, as I said, `then` chains:

var res2 = Promise.all([1, 2, 3, 4, 5].map(fn)).then(
    data => Promise.all(data.map(fn))
).then(function(data){
    // the next `then` is executed after the promise has returned from the previous
    // `then` fulfilled, in this case it's an aggregate promise because of 
    // the `.all` 
    return Promise.all(data.map(fn));
}).then(function(data){
    // just for good measure
    return Promise.all(data.map(fn));
});

// now to get the results:

res2.then(function(data){
    console.log(data); // [16, 32, 48, 64, 80]
});

5
Ах, деякі правила з вашого погляду :-)
Бергі

1
@Bergi хтось справді повинен скласти список цих правил і короткий перелік обіцянок. Ми можемо розмістити його на bluebirdjs.com, ймовірно.
Бенджамін Грюенбаум

оскільки я не повинен просто дякувати - цей приклад виглядає добре, і мені подобається пропозиція на карті, однак, що робити з колекцією об'єктів, де лише деякі мають методи асинхронізації? (Мій пункт 3 вище) У мене виникла ідея, що я б абстрагував логіку розбору кожного елемента у функції, а потім дозволити її вирішити або у відповіді на виклик асинхрону, або там, де не було виклику асинхронізації, просто вирішити. Чи має це сенс?
user3205931

Мені також потрібно, щоб функція map повернула як об'єкт json, який я будую, так і результат виклику async, який мені потрібно зробити, щоб не знати, як це зробити - нарешті, вся справа повинна бути рекурсивною, оскільки я ходжу в каталог структура - Я все ще
жую

2
@ user3205931 обіцянки прості, а не легкі , тобто - вони не такі звичні, як інші речі, але як тільки ви їх зробите, їх набагато краще використовувати. Повісьте, ви отримаєте :)
Бенджамін Грюнбаум

42

Ось простий приклад використання зменшення. Вона працює серійно, підтримує порядок вставки та не потребує Bluebird.

/**
 * 
 * @param items An array of items.
 * @param fn A function that accepts an item from the array and returns a promise.
 * @returns {Promise}
 */
function forEachPromise(items, fn) {
    return items.reduce(function (promise, item) {
        return promise.then(function () {
            return fn(item);
        });
    }, Promise.resolve());
}

І використовуйте його так:

var items = ['a', 'b', 'c'];

function logItem(item) {
    return new Promise((resolve, reject) => {
        process.nextTick(() => {
            console.log(item);
            resolve();
        })
    });
}

forEachPromise(items, logItem).then(() => {
    console.log('done');
});

Ми вважаємо корисним надсилати необов'язковий контекст у цикл. Контекст є необов'язковим і ділиться всіма ітераціями.

function forEachPromise(items, fn, context) {
    return items.reduce(function (promise, item) {
        return promise.then(function () {
            return fn(item, context);
        });
    }, Promise.resolve());
}

Ваша функція обіцянки виглядатиме так:

function logItem(item, context) {
    return new Promise((resolve, reject) => {
        process.nextTick(() => {
            console.log(item);
            context.itemCount++;
            resolve();
        })
    });
}

Дякую за це - ваше рішення спрацювало для мене там, де інших (включаючи різні npm libs) не було. Ви опублікували це в npm?
SamF

Дякую. Функція передбачає, що всі обіцянки вирішені. Як ми поводимось із відхиленими обіцянками? Крім того, як ми можемо впоратися з успішними обіцянками зі значенням?
oyalhi

@oyalhi Я б запропонував використовувати "контекст" та додати масив відхилених вхідних параметрів, відображених на помилку. Це дійсно для кожного випадку використання, оскільки деякі захочуть ігнорувати всі залишки обіцянок, а деякі - ні. Для повернутого значення також можна використовувати аналогічний підхід.
Стівен Спунгін

1

У мене було через ту саму ситуацію. Я вирішив за допомогою двох Promise.All ().

Я думаю, що це було дійсно вдале рішення, тому я опублікував його в npm: https://www.npmjs.com/package/promise-foreach

Я думаю, що ваш код буде приблизно таким

var promiseForeach = require('promise-foreach')
var jsonItems = [];
promiseForeach.each(jsonItems,
    [function (jsonItems){
        return new Promise(function(resolve, reject){
            if(jsonItems.type === 'file'){
                jsonItems.getFile().then(function(file){ //or promise.all?
                    resolve(file.getSize())
                })
            }
        })
    }],
    function (result, current) {
        return {
            type: current.type,
            size: jsonItems.result[0]
        }
    },
    function (err, newList) {
        if (err) {
            console.error(err)
            return;
        }
        console.log('new jsonItems : ', newList)
    })

0

Для того, щоб додати до представленого рішення, у моєму випадку я хотів отримати декілька даних із Firebase для переліку продуктів. Ось як я це зробив:

useEffect(() => {
  const fn = p => firebase.firestore().doc(`products/${p.id}`).get();
  const actions = data.occasion.products.map(fn);
  const results = Promise.all(actions);
  results.then(data => {
    const newProducts = [];
    data.forEach(p => {
      newProducts.push({ id: p.id, ...p.data() });
    });
    setProducts(newProducts);
  });
}, [data]);
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.