Use async await with Array map

Question

Given the following code   var arr    1 2 3 4 5    var results  number     await arr map async  item   Promise lt number gt    gt            await callAsynchronousOperation item           return item   1            which produces the following error      TS2322  Type  Promise lt number gt     is not assignable to type  number       Type  Promise lt number gt  is not assignable to type  number     How can I fix it  How can I make async await and Array map work together

User · Answer

If you map to an array of Promises  you can then resolve them all to an array of numbers   See  Promise all

User · Answer

I had a task on BE side to find all entities from a repo  and to add a new property url and to return to controller layer  This is how I achieved it  thanks to Ajedi32 s response   async findAll    Promise lt ImageResponse   gt        const images   await this imageRepository find       This is an array of type Image  DB entity      const host   this request get  host        const mappedImages   await Promise all images map image   gt       image  url   http     host  images   image id           This is an array of type Object     return plainToClass ImageResponse  mappedImages      Result is an array of type ImageResponse      Note  Image  entity  doesn t have property url  but ImageResponse - has

User · Answer

A solution using modern-async s map    import   map   from  modern-async       const result   await map myArray  async  v    gt                The advantage of using that library is that you can control the concurrency using mapLimit   or mapSeries

User · Answer

The problem here is that you are trying to await an array of promises rather than a promise  This doesn t do what you expect   When the object passed to await is not a Promise  await simply returns the value as-is immediately instead of trying to resolve it  So since you passed await an array  of Promise objects  here instead of a Promise  the value returned by await is simply that array  which is of type Promise lt number gt      What you need to do here is call Promise all on the array returned by map in order to convert it to a single Promise before awaiting it   According to the MDN docs for Promise all      The Promise all iterable  method returns a promise that resolves   when all of the promises in the iterable argument have resolved  or   rejects with the reason of the first passed promise that rejects    So in your case   var arr    1  2  3  4  5    var results  number     await Promise all arr map async  item   Promise lt number gt    gt        await callAsynchronousOperation item       return item   1         This will resolve the specific error you are encountering here

User · Answer

There s another solution for it if you are not using native Promises but Bluebird    You could also try using Promise map    mixing the array map and Promise all  In you case      var arr    1 2 3 4 5      var results  number     await Promise map arr  async  item   Promise lt number gt    gt        await callAsynchronousOperation item       return item   1

User · Answer

I d recommend using Promise all as mentioned above  but if you really feel like avoiding that approach  you can do a for or any other loop   const arr    1 2 3 4 5   let resultingArr       for  let i in arr     await callAsynchronousOperation i     resultingArr push i   1

User · Answer

You can use  for await  let resolvedPromise of arrayOfPromises      console log resolvedPromise     https   developer mozilla org en-US docs Web JavaScript Reference Statements for-await   of If you wish to use Promise all   instead you can go for Promise allSettled   So you can have better control over rejected promises  https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Promise allSettled

User · Answer

Solution below to process all elements of the array in parallel  asynchronously AND preserve the order  const arr    1  2  3  4  5  6  7  8   const randomDelay        gt  new Promise resolve   gt  setTimeout resolve  Math random     1000     const calc   async n   gt      await randomDelay      return n   2      const asyncFunc   async      gt      const unresolvedPromises   arr map n   gt  calc n      const results   await Promise all unresolvedPromises       asyncFunc     Also codepen  Notice we only  quot await quot  for Promise all  We call calc without  quot await quot  multiple times  and we collect an array of unresolved promises right away  Then Promise all waits for resolution of all of them and returns an array with the resolved values in order

[javascript] Use async await with Array.map

Examples related to javascript

Examples related to typescript

Examples related to promise

Examples related to async-await

Examples related to ecmascript-2017