原生JavaScript使用Fetch提交FormData时代码不执行Bug求解

使用原生JavaScript和PHP开发，未引入jQuery，以下代码仅为片段，未包含PHP文件及其他JS代码。
问题表现：

• 点击保存按钮触发事件后，除FormData提交逻辑外其余代码均未运行，事件首尾的console log无输出
• 提交的FormData中的图片可以正常上传到PHP REST API接口并存储到指定文件夹，但无法接收到该PHP文件返回的JSON响应
• 提交JSON等其他类型数据时所有逻辑运行正常，可正常接收到同个PHP文件返回的JSON响应，仅提交FormData时触发该问题

save_bg_btn.addEventListener('click', save_background_picture);

async function save_background_picture(){

    console.log("test 1");

    const formData = new FormData();
    const save_files_background_pic = file_bg_pic.files[0];
    const url = 'http://localhost/test/background-cover.php';

    formData.append("file_bg_pic", save_files_background_pic);

    await post_formdata_request(url, formData)
        .then(data =>{ 
            console.log(data);
        })
        .catch(err => console.log(err));
    
     console.log(test 2);

}


function post_formdata_request(url, formData){

    return new Promise((resolve, reject) => {
        
        fetch(url, {
            method: 'POST',
            body: formData
        })
        .then(res => res.json())
        .then(data => resolve(data))
        .catch(err => reject(err));
    });
}

1. 修复语法错误
   你代码中的console.log(test 2);未给字符串加引号，属于语法错误，会导致函数执行中断，修改为console.log("test 2");。

2. 阻止按钮默认提交行为
   如果你的保存按钮是<form>标签内的type="submit"按钮，点击后会触发表单默认提交、页面刷新，日志会被清空看起来像没有执行。修改函数接收事件参数，阻止默认行为：

async function save_background_picture(e){
    e.preventDefault(); // 新增这行阻止表单默认提交
    // 原有逻辑不变
}

3. 排查接口返回格式问题
   提交FormData时如果PHP接口返回的响应头没有设置Content-Type: application/json，或者响应内容不是标准JSON格式，res.json()会直接抛出错误进入catch分支。可以先把响应转为文本排查原始返回内容：

function post_formdata_request(url, formData){
    return new Promise((resolve, reject) => {
        fetch(url, {
            method: 'POST',
            body: formData
        })
        .then(res => res.text()) // 先转为文本看原始返回
        .then(data => {
            console.log('接口原始返回：', data)
            // 确认是合法JSON后再改为 resolve(JSON.parse(data))
        })
        .catch(err => reject(err));
    });
}

4. 统一异步写法
   不要混用async/await和.then/.catch，统一逻辑避免执行异常：

async function save_background_picture(e){
    e.preventDefault();
    console.log("test 1");
    const formData = new FormData();
    const save_files_background_pic = file_bg_pic.files[0];
    const url = 'http://localhost/test/background-cover.php';
    formData.append("file_bg_pic", save_files_background_pic);
    try {
        const data = await post_formdata_request(url, formData);
        console.log(data);
    } catch(err) {
        console.log('请求异常：', err);
    }
    console.log("test 2");
}

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