Fetch API发送POST请求后跳过.then()块：JSON响应未处理

核心逻辑说明 #

首先明确：fetch是异步非阻塞操作，函数里的return false会在请求发送后立刻执行，这是正常的异步代码执行顺序，但这不应该导致.then()块完全不执行。你看到的“跳过.then()直接执行return false”是异步特性导致的执行顺序问题，但.then()未触发才是需要排查的异常点。

可能原因与排查方案 #

1. 响应状态码未触发预期分支，但日志未被捕获 #

resposta.ok仅在状态码为2xx时返回true，如果后端返回3xx/4xx/5xx状态码，会进入else分支，但可能因为控制台过滤、日志级别等原因没看到输出。

排查操作：
在.then(resposta)开头强制添加状态码日志，确保能确认是否进入了then块：

.then(function (resposta) {
    console.log("进入then块，响应状态码：", resposta.status); // 新增此行
    console.log("HERE'S IS THEN()!")
    // 原有代码不变
})

同时升级catch块的日志级别，避免被忽略：

.catch(function (erro) {
    console.error("fetch捕获到异常：", erro); // 改为error级别，更显眼
})

2. 页面在响应返回前被刷新/跳转 #

如果login函数绑定在表单submit事件上，即使你return false，可能存在其他代码触发页面刷新，导致浏览器终止当前页面的异步任务，.then()自然没机会执行。

排查操作：

• 检查是否有其他绑定在表单上的事件处理函数，是否存在未被阻止的默认提交行为
• 在login函数开头添加event.preventDefault()（需确保函数接收事件参数）：

function login(event) {
    event.preventDefault(); // 强制阻止表单默认提交跳转
    // 原有代码不变
}

3. 浏览器缓存或Service Worker拦截请求 #

部分场景下，Service Worker可能拦截fetch请求，或者浏览器缓存了旧响应，导致异步回调未触发。

排查操作：

• 打开开发者工具Network标签，勾选「Disable cache」后重新测试
• 检查浏览器是否注册了Service Worker，暂时禁用后再测试

4. 响应Content-Type异常导致JSON解析失败 #

如果后端返回的JSON响应Content-Type不是application/json，resposta.json()会抛出异常，但这个异常未被外层捕获，会导致看起来.then()没执行（实际是执行了但内部出错）。

排查操作：
给resposta.json()添加独立的异常捕获：

resposta.json().then(json => {
    // 原有代码
}).catch(err => {
    console.error("JSON解析失败：", err);
});

同时在Network标签查看响应头的Content-Type是否为application/json。

代码优化建议 #

用async/await改写代码，让异步逻辑更清晰，调试也更方便：

async function login(event) {
    event.preventDefault();
    const emailVar = email_input.value;
    const senhaVar = senha_input.value;

    if (!emailVar || !senhaVar) return false;

    console.log("FORM LOGIN: ", emailVar);
    console.log("FORM SENHA: ", senhaVar);

    try {
        const resposta = await fetch("/usuario/autenticar", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ emailServer: emailVar, senhaServer: senhaVar })
        });
        
        console.log("进入响应处理，状态码：", resposta.status);
        if (resposta.ok) {
            const json = await resposta.json();
            console.log(json);
            sessionStorage.EMAIL_USUARIO = json.email;
            sessionStorage.NOME_USUARIO = json.nome;
            sessionStorage.ID_USUARIO = json.id;
        } else {
            console.log("login error");
            const texto = await resposta.text();
            console.error(texto);
        }
    } catch (erro) {
        console.error("请求或处理异常：", erro);
    }
    return false;
}

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