使用axios向服务端发送请求后如何正确校验请求状态？

问题根因 #

你遇到的首次空提交打印no errors、填值提交无输出的问题，核心是两个逻辑错误：

• 错误标记变量的作用域设置不当，若使用外层作用域的变量存储单次请求的错误状态，多次请求的状态会互相覆盖，导致判断失准
• finally块的执行时机与异步请求的状态更新逻辑时序不匹配，你之前的写法没有在请求的成功/失败回调中正确同步错误状态到判断逻辑中

修复方案 #

不要使用外层作用域的变量存储单次请求的错误状态，直接在单次请求的逻辑内部定义错误标记，参考代码如下：

const submitForm = async (formData) => {
  let isRequestError = false
  try {
    // 发送表单提交请求
    await axios.post('/你的提交接口地址', formData)
    // 提交成功后可按需调用/getUser接口获取已提交数据做校验
    // const submitResult = await axios.get('/getUser')
  } catch (err) {
    // 空表单提交触发服务端错误时会进入该分支
    isRequestError = true
    console.error('请求错误：', err.response?.data || err.message)
  } finally {
    // 按错误状态执行对应逻辑
    if (isRequestError) {
      console.log('存在错误')
      // 错误场景下的自定义逻辑
    } else {
      console.log('no errors')
      // 无错误场景下的自定义逻辑
    }
    // 两次请求之间需要运行的指定函数可放在此处
    runYourCustomFunction()
  }
}

额外说明 #

如果需要使用/getUser接口的返回值做后续业务处理，把接口调用放在try块的提交请求之后即可，接口返回的内容可以直接在该作用域内使用。

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