如何优化异步await代码？解决多括号与PhpStorm警告问题

原代码问题 #

原代码意图实现并行文件上传，完成后从uploads列表移除对应项，但存在两个问题：

async function onDrop(files: File[]) {
    for (let f of files) {
        let ref = uploads.push({name: f.name});
        (async () => {
            await api.uploadFile(f, f.name);
            uploads.delete(ref);
        })()
    }
}

• 嵌套的立即执行匿名函数带有三对括号，可读性差
• PhpStorm提示“Missing await for an async function call”警告，原因是未等待匿名异步函数的返回

优化后的代码 #

以下是用await改写的版本，解决了上述问题：

async function onDrop(files: File[]) {
    const uploadTasks = files.map(async (file) => {
        const itemRef = uploads.push({name: file.name});
        await api.uploadFile(file, file.name);
        uploads.delete(itemRef);
    });

    // 若需等待所有上传任务完成则保留此行，仅需并行启动可省略
    await Promise.all(uploadTasks);
}

改动说明 #

• 用Array.map替代原循环+立即执行匿名函数的写法，彻底去掉了可读性差的嵌套括号，代码结构更直观
• 将每个文件的上传逻辑封装为独立的async回调，通过map生成所有上传任务的Promise数组，再用Promise.all统一等待，解决了未等待异步函数的警告问题，同时保留了并行上传的核心逻辑
• 变量命名更清晰（file替代f，itemRef替代ref），进一步提升代码可读性

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