如何在异步操作的每个项目中应用异步函数？

Question

Googled a ton of different sources, tried to figure it out for 2 days in a row, but nothing worked as expected until now. I'm a bit desperate and looking for other mind's ideas!

I'm trying to apply an asynchronous function I've written (that works with both promises and callbacks depending on the situation) inside a reduce function since I'm looking for the reduced value of the objects concatenated after each one is parsed, but I'm not succeeding on this feat yet.

The function I want to apply in each object(article) of the big array of articles looks like this sample:

renderEngine(
{'author': article.author, 'location': article.location},
'template.xml',
(err, parsedContent) => {
    if (err)
        callback(err, null)
    else
        callback(null, parsedContent)
})

How can one use a function like this with reduce ?

Answer 1

The general idea of using reduce with Promises is for each iteration to await the resolution of the accumulator, where the accumulator is the Promise that resolves once the previous iteration finishes. Here's a live snippet:

 const requests = [1, 1, 1]; const resolveAfterSeconds = function(sec) { return new Promise(res => setTimeout(res, sec * 1000)) } const doBatch = async function() { const results = await requests.reduce(async (listP, seconds) => { /* the reducer function isn't actually running sequentially itself; the functions all *start* synchronously immediately, but each awaits the resolve of the previous iteration before proceeding */ const list = await listP; await resolveAfterSeconds(seconds); console.log(`returning ${JSON.stringify(listP)}`); // since this is in an async function, this gets automatically converted to a promise: return list.concat([seconds]); }, []); console.log(`done, results ${JSON.stringify(results)}`); } doBatch(); 

For your code, it would probably be useful to first transform the renderEngine call into a function that returns a Promise , and then it's pretty straightforward to call that function on each iteration:

const getRender = renderArg => new Promise((resolve, reject) => {
  renderEngine(renderArg, (err, parsedContent) => {
    if (err) return reject(err);
    resolve(parsedContent);
});

const parseArticles = articles => articles.reduce(async (articlesSoFarP, { author, location }) => {
  const articlesSoFar = await articlesSoFarP;
  const renderedArticle = await getRender({ author, location });
  return [...articlesSoFar, renderedArticle];
}, []);

But, it would probably be a lot clearer to read the code if you used a for loop instead:

const parseArticles = async (articles) => {
  const parsedArticles = [];
  for (const { author, location } of articles) {
    const renderedArticle = await getRender({ author, location });
    parsedArticles.push(renderedArticle);
  }
  return parsedArticles;
};