Execute promises map sequentially

Question

I have written a function that is being called in a loop (map) and that function is using promises. Now, I want that function to run synchronously and exit before its next instance is called.

 function t1(){ let arr1 = [1,2,3,4,5]; return Promise.map(arr1, (val) =>{ const params = { "param1" : val1 }; return t2(params); }); } function t2(event){ return Promise.resolve() .then({ //do something //code doesn't reach here in sync manner. all five instance are invoked and then code reaches here for first instance and so on }) .then({ //promise chaining. do something more }) }

t2 is beingcalled five times, but I want each instance to be called only after the instance before it has returned the value. Currently its not behaving like that but invoking the function five times in parallel.

I can't use async/await due to project limitations.

Answer 1

The problem with your current code is that Promise.prototype.map , like forEach , does not wait for asynchronous functions called inside it to complete. (No asynchronous call will ever be waited for unless you tell the interpreter to do so explicitly with await or .then )

Have t1 await each call of t2 :

async function t1(){
  let arr1 = [1,2,3,4,5];
  const results = [];
  for (const val of arr1) {
    results.push(await t2(val));
  }
  return results;
}

Or if you want to use reduce instead of async / await :

 const delay = () => new Promise(res => setTimeout(res, 500)); function t1(){ let arr1 = [1,2,3,4,5]; return arr1.reduce((lastProm, val) => lastProm.then( (resultArrSoFar) => t2(val) .then(result => [...resultArrSoFar, result]) ), Promise.resolve([])); } function t2(event){ return delay().then(() => { console.log('iter'); return event; }); } t1() .then(results => console.log('end t1', results));

Or, if you need the sequential functionality to be encapsulated in t2, then have t2 have a semi-persistent variable of the previous Promise it generated:

 const delay = () => new Promise(res => setTimeout(res, 500)); const t1 = () => { return Promise.all([1, 2, 3, 4].map(t2)); }; const t2 = (() => { let lastProm = Promise.resolve(); return (event) => { const nextProm = lastProm .catch(() => null) // you may or may not want to catch here .then(() => { // do something with event console.log('processing event'); return delay().then(() => event); }); lastProm = nextProm; return nextProm; }; })(); t1().then(results => console.log('t1 done', results));

Answer 2

(function loop(index) {
    const next = promiseArray[index];
    if (!next) {
        return;
    }
    next.then((response) => {
        // do Something before next
        loop(index + 1);
    }).catch(e => {
        console.error(e);
        loop(index + 1);
    });
})(0 /* startIndex */)

Answer 3

Here is what running Promises sequentially would look like when using .reduce() in combination with async/await:

 async function main() { const t2 = (v) => Promise.resolve(v*2) const arr1 = [1,2,3,4,5]; const arr1_mapped = await arr1.reduce(async (allAsync, val) => { const all = await allAsync all.push(await t2(val) /* <-- your async transformation */) return all }, []) console.log(arr1_mapped) } main()