为何JavaScript中return无法终止我的异步函数执行？

你的代码存在两个核心问题：

1. console.log 不在 Promise 链中，会在请求发起后立即执行，而非等待请求完成后根据结果判断是否执行
2. 当返回400状态时，你只是返回了undefined，Promise 链仍会继续执行后续的.then(res => res.json())，导致调用json()时因为res是undefined而报错

下面提供两种可行的修复方案：

方案1：使用 async/await + try/catch（推荐） #

由于你的函数已经标记为async，直接用await处理异步逻辑会更直观，控制流也更清晰：

async function updateUserInfo(userData) {
    const modal = document.querySelector('.userInfos > dialog')
    const userToken = getUserToken()

    try {
        const nuUserSettings = await fetch(`http://localhost:6278/users`, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                Authorization: `Bearer ${userToken}`,
            },
            body: JSON.stringify(userData)
        })

        // 遇到400直接终止函数
        if (nuUserSettings.status === 400) {
            // 这里可以添加400错误的处理逻辑，比如提示用户参数错误
            return
        }

        // 仅在请求成功时解析响应
        const responseData = await nuUserSettings.json()
        // 后续处理逻辑写在这里
        console.log('请求成功，数据已解析:', responseData)
    } catch (error) {
        // 处理网络错误或其他异常
        console.error('更新用户信息失败:', error)
    }
}

方案2：修复 Promise 链写法 #

如果坚持使用.then链式调用，需要在400状态时主动拒绝 Promise，中断后续链的执行：

async function updateUserInfo(userData) {
    const modal = document.querySelector('.userInfos > dialog')
    const userToken = getUserToken()

    fetch(`http://localhost:6278/users`, {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${userToken}`,
        },
        body: JSON.stringify(userData)
    })
    .then(res => {
        if (res.status === 400) {
            // 拒绝Promise，直接跳转到catch块
            return Promise.reject(new Error('参数错误，请求失败'))
        }
        // 请求正常时传递响应对象到下一个then
        return res
    })
    .then(res => res.json())
    .then(data => {
        // 请求成功后的处理逻辑
        console.log('请求成功:', data)
    })
    .catch(error => {
        // 处理400错误或其他异常
        console.error('错误:', error.message)
    })
}

关于你尝试的else写法失败的原因 #

如果之前尝试把代码放入else，但.then(res => res.json())无法工作，大概率是因为你没有在else分支中返回响应对象。正确的写法应该是：

.then(res => {
    if (res.status === 400) {
        return
    } else {
        // 必须返回res，下一个then才能拿到响应对象
        return res
    }
})
.then(res => {
    // 这里要判断res是否存在，避免400时调用json()报错
    if (res) return res.json()
})

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