Nuxt 3 useFetch 组合式函数调用API报错求助

问题描述 #

我正在学习Nuxt3，遇到一个问题：我有一个/api/cars/city的API端点（支持多个可选筛选器），这个端点本身运行正常，但我写的useFetchCars.js组合式函数调用它时始终报错无法获取数据，我觉得代码逻辑没问题，求帮忙排查原因。

组合式函数代码 #

export default async (city, filters) => {
    const {data, error} = await useFetch(`/api/cars/${city}`, {
        params: {
            ...filters,
        }
    });

    if(error) {
        throw createError({
            ...error.value,
            statusMessage: "Unable to fetch cars",
        })
    };

    return data;
};

页面代码 #

<script setup>
  const route = useRoute();
  const cars = await useFetchCars(route.params.city, {
    minPrice: route.query.minPrice,
    maxPrice: route.query.maxPrice,
    make: route.params.make
  })

</script>

<template>
  <div>
    {{ cars }}
    <CarCards />
  </div>
</template>

排查步骤 #

• 修正错误判断逻辑
  当前代码中直接判断if(error)是错误的，因为useFetch返回的error是Ref对象，永远为真。必须判断error.value是否存在，这很可能是导致报错的核心原因：

  if (error.value) {
    throw createError({
      ...error.value,
      statusMessage: "Unable to fetch cars",
    })
  }
  

• 检查city参数有效性
  确认route.params.city是否有有效值：如果路由未正确定义city参数，或者页面路径中没有该参数，会导致请求路径变成/api/cars/，触发404错误。可以在组合式函数开头添加日志确认：

  console.log('当前城市参数:', city)
  

• 过滤无效筛选参数
  当route.query.minPrice、maxPrice或route.params.make为undefined时，会被拼入URL参数中（如?minPrice=undefined），可能导致后端解析失败。需要先过滤空值：
  修改组合式函数的params配置：

  params: Object.fromEntries(
    Object.entries(filters).filter(([_, value]) => value !== undefined)
  )
  

• 核对API端点路径
  你提到的端点是/api/cars/city，但组合式函数中拼接的路径是/api/cars/${city}。如果端点是固定路径而非动态参数，需要调整请求路径为/api/cars/city，并将city作为参数传入params中。

• 查看实际请求详情
  打开浏览器开发者工具的Network面板，查看请求的URL、状态码和响应内容，确认是否是路径错误、参数错误或后端返回的具体错误信息。也可以在错误分支中打印详细错误：

  if (error.value) {
    console.error('请求错误详情:', error.value)
    throw createError({
      ...error.value,
      statusMessage: "Unable to fetch cars",
    })
  }
  

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