JS中如何等待多个拖放文件的处理Promise全部完成后调用收尾函数

实现方案 #

你猜测的用Promise数组结合Promise.all的方案是最优解，实现起来很简单：

1. 修改getFilesInfo函数，让它返回所有文件处理任务的Promise合集

function getFilesInfo(ev){
    const promiseList = []
    for (let i = 0; i < ev.dataTransfer.items.length; i++) {
        if (ev.dataTransfer.items[i].kind === 'file') {
            let file = ev.dataTransfer.items[i].getAsFile();
            // 将每个文件的处理Promise存入数组
            const fileTask = file.arrayBuffer().then((data)=>getFileInfo(file.name,data));
            promiseList.push(fileTask);
        }
    }
    // 返回Promise.all实例，会在所有任务完成后触发后续逻辑
    return Promise.all(promiseList);
}

2. 调用时等待所有任务完成后执行processResults

你可以用.then链式调用：

getFilesInfo(ev)
.then(() => {
    // 所有getFileInfo执行完成后才会运行
    processResults();
})
.catch(err => {
    // 可选：捕获文件读取过程中的异常
    console.error('文件处理失败：', err);
});

如果是在async函数内部，也可以用更简洁的await写法：

async function handleDrop(ev) {
    // 拖放事件的其他前置处理逻辑
    await getFilesInfo(ev);
    processResults();
}

可选：兼容单个文件读取失败的场景

默认情况下只要有一个文件读取失败，Promise.all就会立即抛出异常终止等待，如果需要即使部分文件读取失败也要继续执行processResults，可以给单个文件任务加单独的异常捕获：

const fileTask = file.arrayBuffer()
.then((data)=>getFileInfo(file.name,data))
.catch(err => console.error(`文件${file.name}读取失败：`, err));

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