Nuxt3中useFetch使用异常：调用后控制台输出null无法正常工作

核心原因 #

useFetch是Nuxt3的组合式函数，返回的data是响应式Ref对象，在自定义异步函数中直接打印data.value时，可能请求还未完成，或是客户端环境下响应式状态尚未更新，导致拿到初始的null值。

正确使用方式 #

方式1：直接在组件setup/script setup中调用（推荐） #

在Nuxt3的<script setup>中，useFetch无需包裹在自定义async函数里，Nuxt会自动处理异步状态：

<script setup>
const { data, pending, error } = useFetch("https://fakestoreapi.com/products/1");

// 监听data变化，获取请求完成后的数据
watch(data, (newData) => {
  if (newData) {
    console.log(newData);
  }
});
</script>

方式2：在自定义async函数中正确处理 #

如果必须在自定义async函数中调用useFetch，可以通过unwrap方法等待请求完成后取值：

const refreshNewToken = async () => {
  const { data } = await useFetch("https://fakestoreapi.com/products/1");
  // 等待响应式数据解析完成
  const result = await unwrap(data);
  console.log(result);
};

方式3：改用useAsyncData实现更灵活的异步控制 #

如果useFetch的自动处理逻辑不满足需求，可以使用底层的useAsyncData手动控制请求：

const refreshNewToken = async () => {
  const { data } = await useAsyncData('product-detail', () => 
    $fetch("https://fakestoreapi.com/products/1")
  );
  console.log(data.value);
};

关键注意事项 #

• useFetch是为Nuxt组件生命周期设计的，优先直接在<script setup>或组件setup函数中调用，避免嵌套在多层异步函数内。
• 可以通过pending状态判断请求是否在进行中，error状态捕获请求异常：

const { data, pending, error } = useFetch("https://fakestoreapi.com/products/1");

if (pending) console.log('请求处理中...');
if (error) console.log('请求错误:', error.value);

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