如何让对话框在多个async/await调用全部完成后再关闭？

问题核心是你那些自执行的async函数属于异步任务，不会阻塞后续代码执行，所以close()会立刻触发，弹窗刚打开就被关闭。要实现所有服务端调用完成后再关闭弹窗，可以按以下方式修改代码：

// 先打开弹窗
document.getElementById("dialog").showModal();

// 收集所有需要执行的异步任务Promise
const asyncTasks = [];

if(condition1 && condition2){
    asyncTasks.push(f1()); // f1是async函数的话，调用后直接返回Promise，无需额外包裹
}

if(condition3 && condition4){
    asyncTasks.push(f2());
}

if(condition5 && condition6){
    asyncTasks.push(f3());
}

// 等待所有异步任务完成后关闭弹窗
(async () => {
    await Promise.all(asyncTasks);
    document.getElementById("dialog").close();
})();

关键逻辑说明： #

• 用数组asyncTasks收集所有符合条件的异步请求Promise，避免零散的自执行async函数导致的异步失控
• Promise.all()会等待数组内所有Promise都执行完成（成功resolve）后，才会继续执行后续代码，确保所有服务端调用都结束
• 把等待逻辑包在自执行async函数中，既可以使用await语法，又不会阻塞主线程

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