Use async await with Array.map

async-await, ecmascript-2017, javascript, promise, typescript

Solution

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 `await`ing 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.

Problem

Original source