Как переписать for на map для асинхронного кода?

Question

[ivanDoligov]

Добрый день профессионалы! Вот такая загадка:

const list = [
  'main',
  'main-footer',
  'main-header',
  'main-content',
];

for (let i = 0; i < list.length; i++) {
      await funcOne(list[i]);
    }

функция funcOne асинхронная она переходит последовательно в каждый url и делает определенные вещи

async function funcOne(url) {
    await openFunc(url);
    ... и т.д.
  }

Как переписать цикл с помощью map чтобы тоже работало?
Пробовал вот так, но не работает

await Promise.all(list.map(async i => await funcOne(i)));

Comments

[Сергей Сергей]

Ого.
А зачем на синхронный map заводить асинхронную функцию? Неужто хочется писать
list.map( openFunc ).forEach( appendInDocument );

[ivanDoligov]

Сергей Сергей, map то синхронный, но вроде ничего сложного не должно быть , как прочитал вот здесь - https://habr.com/ru/post/435084/
но почему-то не работает

[ivanDoligov]

Кирилл Горелов, да, спасибо, но for и for of не подходит...

[Сергей Сергей]

Там пишут, что Promise.all может встать, а внутренние отработают. Поэтому надо отдебажить, где останавливается.

temp = list.map(async i => await funcOne(i));
resPA = Promise.all( temp );

temp, resPA глобальные переменные, чтобы вывести в консоль вручную.

[Кирилл Горелов]

ivanDoligov, Я по этому потом и удалил комментарий свой((

Answer 1

[Alex]

await Promise.all(list.map(funcOne)); // Если в случае ошибки в одной итерации нужно остановить все остальное

await Promise.allSettled(list.map(funcOne)); // Если в случае ошибки в одной итерации остальные должны продолжить работу

Но вы должны учитывать разницу:

• Если использовать стандартный for то все асинхронные вызовы будут выполняться последовательно, один за другим.
  
• Если вызывать асинхронную функцию в map, то все вызовы будут запущены параллельно, и итоговый Promise.all нужен, чтобы дождаться пока они все будут выполнены. Это эквивалентно примерно такому коду:
  

  const promises = []
  for (const item of list) {
        promises.push(funcOne(item));
  }
  await Promise.all(promises)

  
  

Comments

[ivanDoligov]

Alex, скажите пожалуйста, а почему мы не передаем url в funcOne вот здесь
await Promise.all(list.map(funcOne));

[Alex]

ivanDoligov,
map принимает функцию-callback
В моём случае это funcOne
В вашем случае это async (i) => await funcOne(i) -- стрелочная функция которая просто вызывает funcOne. Я просто избавился от не нужной, в данном случае, обертки.

[ivanDoligov]

Alex, ну да, понял )
скажите я просто читал в примерах, что нужно использовать в стрелочной функции тоже async и потом вызывать в коллбеке await funcOne, но в вашем примере мы не используем async?

async (i) => await funcOne(i)

[Alex]

ivanDoligov,

нужно использовать в стрелочной функции тоже async и потом вызывать в коллбеке await funcOne

Это бред.
У вас получается промис в промисе. Зачем? funcOne уже возвращает промис. (Она уже async если вам так понятнее).

[ivanDoligov]

Alex, ну да, ну да, спасибо!

Answer 2

[Дмитрий Беляев]

Именно с map никак не сделать, что бы следующий вызов функции ждал предыдущего, как это происходит в цикле с await, а вот с reduce уже можно:

const list = [
  'main',
  'main-footer',
  'main-header',
  'main-content',
];

list.reduce((p, item) => p.then(() => funcOne(item)), Promise.resolve());