Async/Await inside Array#map()
You can't do this as you imagine, because you can't use await
if it is not directly inside an async
function.
The sensible thing to do here would be to make the function passed to map
asynchronous. This means that map
would return an array of promises. We can then use Promise.all
to get the result when all the promises return. As Promise.all
itself returns a promise, the outer function does not need to be async
.
const someFunction = (myArray) => {
const promises = myArray.map(async (myValue) => {
return {
id: "my_id",
myValue: await service.getByValue(myValue)
}
});
return Promise.all(promises);
}
If you want to run map with an asynchronous mapping function you can use the following code:
const resultArray = await Promise.all(inputArray.map(async (i) => someAsyncFunction(i)));
How it works:
inputArray.map(async ...)
returns an array of promises - one for each value ininputArray
.- Putting
Promise.all()
around the array of promises converts it into a single promise. - The single promise from
Promise.all()
returns an array of values - the individual promises each resolve to one value. - We put
await
in front ofPromise.all()
so that we wait for the combined promise to resolve and store the array of resolved sub-promises into the variableresultArray
.
In the end we get one output value in resultArray
for each item in inputArray
, mapped through the function someAsyncFunction
. We have to wait for all async functions to resolve before the result is available.
That's because the function in map
isn't async, so you can't have await in it's return statement. It compiles with this modification:
const someFunction = async (myArray) => {
return myArray.map(async (myValue) => { // <-- note the `async` on this line
return {
id: "my_id",
myValue: await service.getByValue(myValue)
}
});
};
Try it out in Babel REPL
So… it's not possible to give recommendation without seeing the rest of your app, but depending on what are you trying to do, either make the inner function asynchronous or try to come up with some different architecture for this block.
Update: we might get top-level await one day: https://github.com/MylesBorins/proposal-top-level-await