Vue.js如何动态展示API返回的特定404错误信息？

问题背景 #

项目采用Laravel后端+Vue.js前端架构，提交车辆登记号至API时存在两种404错误场景：

• 后端无对应记录，API返回Vehicle not found
• 后端有记录但关联表无数据，API返回There is no data for this vehicle
  当前前端错误提示为硬编码文本，需替换为API返回的动态错误信息。

第一步：修正错误信息提取与状态管理 #

首先调整错误处理函数，正确提取API返回的错误信息并更新到Vuex store中：

async searchVehicleRego() {
  try {
    // 修正params语法错误，改为标准对象格式
    const { data } = await useFetchForApi('/search-vehicles/rego', { params: { rego: ABCXYZ } })
  } catch (error) {
    this.handleErrorVehicleRego(error)
  }
}

handleErrorVehicleRego(error) {
  // 从API错误对象中提取车辆登记号相关信息，设置默认值兜底
  const errorMessage = error.errors?.vehicle_registration || '车辆登记号未找到'

  if (error.status === 404) {
    // 提交mutation更新store中的错误信息
    this.$store.commit('sell-my-car/SET_ERRORS', { vehicle_registration: errorMessage })
    this.isRegoNotFound = true // 与模板变量名保持一致，原代码为ifRegoNotFound需修正
  } else if (error.status === 422) {
    // 处理422验证错误，存入所有错误信息
    this.$store.commit('sell-my-car/SET_ERRORS', error.errors)
  }
}

同时在Vuex store中添加对应的mutation和getter，用于管理错误状态：

// store/sell-my-car.js
state: {
  errors: {}
},
mutations: {
  SET_ERRORS(state, errors) {
    state.errors = errors
  }
},
getters: {
  hasErrors: (state) => state.errors,
  // 添加getter专门获取车辆登记号的错误信息
  vehicleRegoError: (state) => state.errors?.vehicle_registration || ''
}

第二步：在模板中动态渲染错误信息 #

修改FindYourCarForm.vue的模板，将硬编码文本替换为从store获取的动态错误信息：

<div v-if="!isRegoNotFound">
  <p>
    不记得你的登记号了？
    <Link text="手动选择" />
  </p>
</div>
<div v-else>
  <Button>
    <span>
      {{ vehicleRegoError }}
      <span>手动选择</span>
    </span>
  </Button>
</div>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
// 判断是否存在错误
const hasError = computed(() => Object.values(store.getters['sell-my-car/hasErrors']).length > 0)
// 获取车辆登记号的错误信息
const vehicleRegoError = computed(() => store.getters['sell-my-car/vehicleRegoError'])
// 判断是否显示登记号未找到提示
const isRegoNotFound = computed(() => !!vehicleRegoError.value)
</script>

错误处理逻辑的合理性说明 #

通过HTTP状态码区分错误类型是前后端交互的标准实践：

• 404状态码明确表示请求资源不存在，对应两种车辆无数据场景，后端返回的详细信息可直接展示给用户
• 422状态码用于处理验证错误（如登记号格式不符合要求），需展示字段级验证提示
• 这种方式前后端约定清晰，前端可根据不同状态码做针对性UI处理，同时保留后端精准错误信息，提升用户体验

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