Why Does `await arr.map()` Fail, and How Can `Promise.all` Fix It?

Understanding Async Await and Array.map Synergy

In the code snippet:

var arr = [1,2,3,4,5];

var results: number[] = await arr.map(async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
});

you receive the error "TS2322: Type 'Promise[]' is not assignable to type 'number[]'". This error signifies a mismatch between the expected type (number[]) and the actual type (Promise[]). To resolve this issue, we need to understand how async await and Array.map interact.

The Issue

The problem arises because you are attempting to await an array of promises (Promise[]), which differs from awaiting a single Promise. await, when applied to an object that is not a Promise, simply returns the value instantaneously. In this situation, since you're awaiting an array of Promise objects, the resulting value is the array itself (Promise[]).

The Solution

To rectify this error, you can utilize Promise.all to transform the Promise[] array into a single Promise. According to the MDN documentation, Promise.all resolves once all promises within the iterable argument have been resolved. In your code, the iterable argument is the array of promises returned by arr.map.

By using Promise.all, you convert your array of promises into a single Promise, enabling you to await the resolution of all promises simultaneously.

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;
}));

Alternatively, consider employing Promise.allSettled, Promise.any, or Promise.race depending on your specific use case. However, for the scenario you've provided, Promise.all remains the most appropriate choice.

The above is the detailed content of Why Does `await arr.map()` Fail, and How Can `Promise.all` Fix It?. For more information, please follow other related articles on the PHP Chinese website!