Typescript中如何在循环内处理异步调用生成无Promise的ImageData数组

直接用map生成Promise<ImageData>数组，再通过Promise.all统一等待所有异步执行完成，即可得到无Promise的纯ImageData数组，代码如下：

// 原有接口定义不变
export interface ImageData {
    url: string;
    size: { width: number; height: number };
}

// 核心实现逻辑
const imagePromises = Array.from(inputFiles).map(async (file): Promise<ImageData> => {
    const url = URL.createObjectURL(file);
    // 等待异步获取尺寸完成
    const size = await getDimensionsFromImageUrl(url);
    return { url, size };
});

// 等待所有异步执行完成，最终得到的images就是纯ImageData数组
const images: ImageData[] = await Promise.all(imagePromises);

• 第一种写法的问题：你往数组中push的size本身是Promise类型，Promise.all只会处理数组顶层的Promise实例，不会解析对象内部的Promise属性，所以最终无法得到纯数据。
• 第二种async + forEach写法的问题：forEach的回调函数预期返回void类型，而async函数默认返回Promise，不符合类型预期所以触发eslint报错；同时forEach不会等待异步回调执行完成，你无法在后续逻辑中确定所有图片尺寸都已经被成功获取。

内容的提问来源于stack exchange，提问作者unknown_boundaries