Use async await with Array.map

by

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<number>[].

What you probably want to do 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<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
}));

This will resolve the specific error you are encountering here.

Depending on exactly what it is you’re trying to do you may also consider using Promise.allSettled, Promise.any, or Promise.race instead of Promise.all, though in most situations (almost certainly including this one) Promise.all will be the one you want.

More Related Contents:

  1. Correct Try…Catch Syntax Using Async/Await
  2. Waiting for more than one concurrent await operation
  3. async/await always returns promise
  4. Using async/await with a forEach loop
  5. How to implement a pseudo blocking async queue in JS/TS?
  6. Async function returning promise, instead of value
  7. What’s wrong with awaiting a promise chain?
  8. Can I fire and forget a promise in nodejs (ES7)?
  9. How can I use async/await at the top level?
  10. Syntax for an async arrow function
  11. How to wait for a JavaScript Promise to resolve before resuming function?
  12. Limited parallelism with async/await in Typescript/ES7
  13. How to async await in react render function?
  14. Can’t throw error from within an async promise executor function
  15. for await of VS Promise.all
  16. JavaScript array .reduce with async/await
  17. Throttle amount of promises open at a given time
  18. How to use ES8 async/await with streams?
  19. Async/Await inside Array#map()
  20. ES8 Immediately invoked async function expression
  21. Do Javascript promises block the stack
  22. What are asynchronous functions in JavaScript? What is “async” and “await” in JavaScript?
  23. async/await inside arrow functions (Array#map/filter)
  24. Wait promise inside for loop
  25. typescript: error TS2693: ‘Promise’ only refers to a type, but is being used as a value here
  26. ES2017 – Async vs. Yield
  27. Async Await map not awaiting async function to complete inside map function before mapping next item
  28. How to return a promise when writestream finishes?
  29. Implement async/await in sort function of arrays javascript
  30. Can I catch an error from async without using await?

Leave a Comment