异步登录函数if判断失败时else分支不执行的解决方法

问题场景 #

实现前端登录功能时编写的异步请求函数出现逻辑异常，原始代码如下：

async function loginUser(event){
    event.preventDefault();
    const response  = await fetch('http://localhost:3001/api/login/',{
        method:'POST',
        headers:{
            'Content-Type' : 'application/json',
        },
        body : JSON.stringify({
            email,
            password,
        }),
    })
    const data = await response.json();
    if(data.user){
        localStorage.setItem("token",data.user);
        // window.location.href = "./CustomerDashboard"; 
    }else{
        console.log("Invalid Credentials");
        toast.error("Login failed");
    }
    console.log(data);
}

异常表现：

• 当if(data.user)条件成立（返回结果包含user字段）时，if块内的token存储逻辑、if语句后方的console.log(data)均可正常执行
• 当if条件不成立时，else块内的错误日志打印、toast失败提示完全不执行，if语句后方的console.log(data)也不会运行

排查思路 #

出现「某分支完全不执行、分支后代码也不触发」的情况，本质是代码执行到if判断前就抛出了未捕获的异常，直接中断了当前async函数的执行，根本没走到分支判断逻辑，按以下优先级排查：

• 第一优先级看浏览器控制台的红色报错，重点找未捕获的Promise异常：
  90%的同类问题都是登录失败场景下接口响应不是合法JSON格式导致的：fetchAPI本身不会因为HTTP状态码是400/401/500就抛错，只要服务端返回了响应，fetch就会进入resolve状态，但如果登录失败时后端返回纯文本提示、空响应、或者HTML格式的错误页，执行await response.json()时就会抛出JSON解析错误，直接终止函数执行。这也完全匹配你遇到的现象：登录成功时后端返回合法JSON，解析无报错，能走到后续if判断；登录失败时解析JSON直接报错，自然走不到else块和后面的打印逻辑。
  验证方式：打开浏览器开发者工具的网络面板，选中登录失败的接口请求，查看响应状态码、响应内容格式，确认是否为标准JSON结构。
• 第二优先级排查全局拦截逻辑：检查是否配置了全局fetch拦截器、全局错误监听、路由守卫逻辑，在接口返回非200状态码时直接触发跳转、抛出全局错误，阻断了当前函数的执行流。
• 第三优先级排查变量引用问题：确认email、password、toast几个依赖变量在失败场景下没有被重写/回收导致引用错误，这类问题控制台会明确抛出ReferenceError，定位成本很低。

修复方案 #

1. 给请求逻辑加try/catch异常捕获，先校验响应格式和HTTP状态码，再做JSON解析和业务判断，避免函数静默中断，修复后代码参考：

async function loginUser(event){
    event.preventDefault();
    try {
        const response  = await fetch('http://localhost:3001/api/login/',{
            method:'POST',
            headers:{
                'Content-Type' : 'application/json',
            },
            body : JSON.stringify({
                email,
                password,
            }),
        })
        // 先校验响应格式，避免JSON解析报错
        const contentType = response.headers.get('content-type');
        let data;
        if (contentType && contentType.includes('application/json')) {
            data = await response.json();
        } else {
            const errText = await response.text();
            throw new Error(errText || `请求异常，状态码：${response.status}`)
        }

        // 统一处理400/401/500等错误状态
        if(!response.ok) {
            console.log("Invalid Credentials", data?.message || '');
            toast.error(data?.message || "Login failed");
            console.log(data);
            return
        }

        if(data.user){
            localStorage.setItem("token",data.user);
            // window.location.href = "./CustomerDashboard"; 
        }else{
            console.log("Invalid Credentials");
            toast.error("Login failed");
        }
        console.log(data);
    } catch (err) {
        // 捕获网络错误、解析错误、业务错误，统一提示
        console.error('登录请求异常：', err);
        toast.error(err.message || "Login failed");
    }
}

2. 对齐前后端接口约定：确认登录失败场景下后端是否返回标准JSON结构、返回字段是否和前端判断逻辑匹配，避免前后端字段名、结构不一致导致的判断失效。
3. 如果是跨域拦截导致请求未正常发送，需要在后端服务配置CORS规则，允许本地前端源的跨域请求。

内容的提问来源于stack exchange，提问作者Logesh R.