异步函数中无法确定await放置位置，如何实现所有图片表单提交后显示上传按钮

代码存在的核心问题 #

• fetch是异步网络请求，原代码中将元素移除、显示按钮的逻辑放在fetch调用之后，不会等待请求完成就会执行，无法保证数据已经存入数据库
• 判断条件item.length === 0逻辑错误：item是单个表单DOM元素，不存在length属性，需要判断的是当前页面剩余的未提交表单总数量
• 定义了async函数但没有使用await等待异步操作，async声明没有生效
• document.querySelectorAll返回的是静态NodeList，页面元素删除后该变量不会自动更新，需要每次判断时重新查询

修正后的代码 #

const imageForms = document.querySelectorAll('.image-upload-details-form');
const uploadMoreImages = document.querySelector('#upload-images-link');

async function processImageForms() {
    for (let item of imageForms) {
        // 给提交回调加async，支持内部使用await
        item.addEventListener("submit", async function (evt) {
            evt.preventDefault();
            const formData = new FormData(this);
            try {
                // 等待fetch请求完成，确认数据提交成功再执行后续操作
                const response = await fetch("upload-details.php", {
                    method: 'post',
                    body: formData
                });
                const text = await response.text();
                console.log(text);
                // 只有请求成功才移除表单
                item.remove();
                // 重新查询当前剩余的未提交表单
                const remainingForms = document.querySelectorAll('.image-upload-details-form');
                if (remainingForms.length === 0) {
                    uploadMoreImages.style.display = 'inline-block';
                }
            } catch (error) {
                console.error('提交失败：', error);
                // 可按需添加提交失败的用户提示，比如alert('详情提交失败，请重试')
            }
        })
    }
}

processImageForms();

// 页面加载时显示/隐藏「上传更多图片」链接
if (imageForms.length === 0) {
    uploadMoreImages.style.display = 'inline-block';
} else {
    uploadMoreImages.style.display = 'none';
}

改动说明 #

• 提交事件回调增加async声明，内部用await等待fetch请求完成，保证数据成功存入数据库后再删除表单、判断是否显示按钮
• 修正判断逻辑，每次提交成功后重新查询页面内剩余的表单数量，数量为0时显示上传更多按钮
• 增加错误场景处理，请求失败时不会删除表单，避免用户提交的数据丢失

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