Nuxt 3.8中如何在useFetch返回错误响应后禁用缓存？

在Nuxt 3中，useFetch默认会对请求结果（包括错误响应）进行缓存，导致页面切换返回时复用旧缓存而非重新发起请求。可以通过以下几种方式禁用或绕过这个缓存：

方法一：直接禁用缓存 #

在useFetch的配置项中添加cache: false，强制每次调用都发起新请求：

const load = async () => {
  const { data, error, status } = await useFetch('http://server.test/api/test', {
    method: 'GET',
    cache: false // 禁用缓存
  });

  if (error.value) {
    console.log('error', error.value);
  }
};

load();

方法二：使用唯一缓存Key #

通过自定义key值，确保每次进入页面时生成唯一标识，让useFetch认为是新请求，从而绕过旧缓存。比如结合时间戳或路由信息：

const load = async () => {
  const { data, error, status } = await useFetch('http://server.test/api/test', {
    method: 'GET',
    key: `test-api-${Date.now()}` // 每次请求生成唯一key
  });

  if (error.value) {
    console.log('error', error.value);
  }
};

load();

如果页面依赖路由参数，也可以用路由参数作为key的一部分，保证参数变化时重新请求：

const route = useRoute();
const load = async () => {
  const { data, error, status } = await useFetch('http://server.test/api/test', {
    method: 'GET',
    key: `test-api-${route.params.id}` // 结合路由参数
  });

  if (error.value) {
    console.log('error', error.value);
  }
};

// 监听路由变化，参数变更时重新请求
watch(() => route.params.id, () => {
  load();
});

方法三：监听页面进入事件重新请求 #

利用Nuxt的页面生命周期钩子，在每次页面进入时重新调用load函数，确保获取最新数据：

const load = async () => {
  const { data, error, status } = await useFetch('http://server.test/api/test', {
    method: 'GET'
  });

  if (error.value) {
    console.log('error', error.value);
  }
};

// 页面每次挂载时重新请求
onMounted(() => {
  load();
});

// 或者监听路由导航完成事件
const router = useRouter();
watch(() => router.currentRoute.value, () => {
  load();
}, { deep: true });

以上方法中，方法一和方法二是最直接针对useFetch缓存机制的解决方案，推荐优先使用。

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