Nuxt方法中两次调用useFetch报`nuxt instance not available`错误求助

问题原因 #

你遇到的错误是因为在嵌套的异步函数中调用useFetch，导致服务端渲染时无法获取到Nuxt实例上下文。Nuxt的组合式API（比如useFetch）需要在组件setup的上下文环境中运行，当你把useFetch封装到getImageOne、getImageTwo这类函数里，再通过顶层await调用时，这些内部调用会脱离Nuxt的实例绑定，从而触发错误。

解决方案 #

方案1：直接并行发起请求 #

去掉不必要的函数封装，直接在顶层用Promise.all并行处理两个useFetch请求，确保它们处于正确的上下文环境中：

<script setup>
// 并行发起两个请求，避免上下文丢失
const [res1, res2] = await Promise.all([
  useFetch('https://dog.ceo/api/breeds/image/random'),
  useFetch('https://dog.ceo/api/breeds/image/random')
])

const dogOne = res1?.data?.value
const dogTwo = res2?.data?.value
</script>

<template>
  <div>
    <p>Dog 1: {{ dogOne }}</p>
    <p>Dog 2: {{ dogTwo }}</p>
  </div>
</template>

方案2：用useAsyncData封装逻辑 #

如果需要保留函数封装，可通过useAsyncData包裹请求逻辑，它会自动确保回调函数在Nuxt实例上下文中执行，同时还能利用Nuxt的数据缓存能力：

<script setup>
const getRandomDogImage = async () => {
  const { data } = await useFetch('https://dog.ceo/api/breeds/image/random')
  return data.value
}

// 用useAsyncData分别发起请求，指定唯一key用于缓存
const { data: dogOne } = await useAsyncData('dog-image-1', getRandomDogImage)
const { data: dogTwo } = await useAsyncData('dog-image-2', getRandomDogImage)
</script>

<template>
  <div>
    <p>Dog 1: {{ dogOne }}</p>
    <p>Dog 2: {{ dogTwo }}</p>
  </div>
</template>

核心总结 #

服务端渲染时，Nuxt的组合式API必须在组件setup的有效上下文内运行，避免在顶层await的嵌套异步函数中直接调用useFetch。通过上述两种方式，既能实现需求，又能保证上下文的正确性，解决nuxt instance not available错误。

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