Nuxt3: useFetch使用过程常见一种报错

一、问题描述

先看一段代码：

<script setup>
const fetchData = async () => {
  const { data, error } = await useFetch('https://api.publicapis.org/entries');
  const { data: data2, error: error2 } = await useFetch(
    'https://api.publicapis.org/entries'
  );
};

await fetchData(); // if you remove await the app will start, but server terminal will return same error
</script>

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

这段代码在不同的Nuxt版本的报错会有不同，但本质是一样的问题：

Nuxt 3.1.1:

nuxt instance unavailable

Nuxt 3.10.3：

[nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables`.

也可以直接访问https://stackblitz.com/edit/github-qe9ulj-opndzv?file=app.vue，在线运行代码，查看结果。

这个问题，在之前的文章《Nuxt: A composable that requires access to the Nuxt instance was called outside of a plugin…》有提到过，这次针对useFetch的使用再次遇到该问题，就再花点时间进行记录。

之所以关注到该问题，是因为对useFetch封装后，在页面setup中调用时（以某种特定的方式进行），出现了上述的错误。

为了更好的描述问题，先简单看一段能正常运行的代码：

<script setup>
const fetchData = async () => {
  const { data, error } = await useFetch('https://api.publicapis.org/entries');
};