nuxt 3 useFetch() 返回错误 fetch failed()

Question

我已经从 nuxt 3 官方文档中设置了 nuxt 3，并使用唯一的 useFetch() 可组合项来获取 app.vue 文件中的数据，但当我们重新加载页面时，它返回错误

Error: fetch failed()

。

请检查我的以下 app.vue 文件代码

<template>
{{data}}
</template>

<script setup>
  const { data, pending, error, refresh } = useFetch('https://api.nuxtjs.dev/mountains',
  {
    method: "get",
  });

  console.log(data.value);
  if (error.value) {
    console.log(error.value);
  }
</script>

我尝试过 useFetch 和 useLazyFetch 可组合项来获取数据，但当我们重新加载页面时，两者都会返回相同的错误。我认为客户端或服务器端存在一些问题，但对此不太了解。当我们再次访问该页面时，useFetch() 也会正确返回结果，但在初始 api 调用或我们硬重新加载页面时会发生错误。

Answer 1

我想通了。问题是我们需要在

ssr: false

中添加

nuxt.config.js

。如果我们需要使用服务器端渲染，也许 SSR 默认是 true，但如果我们想要单文件应用程序，我们需要保留

ssr: false

。以上错误已修复。

nuxt.config.js

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    ssr: false,
})

Answer 2

这里真正的主题是为什么 fetch 或 axios.get 在 SSR 模式下会失败，以及什么配置允许我们保留 SSR 并仍然获取数据。 我这边还在研究这个问题。

Answer 3

我相信您需要在“useFetch”调用之前添加“await”，如文档所示。

@kishan 供参考，这是重构示例的方法：

<template>
    <div>
        <pre>{{ data }}</pre>
    </div>
</template>

<script setup>
// api call (async implied in this context)
// this call is a GET by default
const { data, error } = await useFetch('https://api.nuxtjs.dev/mountains')

// log response (data will be a ref)
if (error.value) console.log('ERROR from useFetch: ', error.value)
if (data.value) console.log('data returned from useFetch: ', data)
</script>

Answer 4

你使用的是nodejs 18+吗？如果是这样，则存在与 ofetch 库相关的bug，导致其无法在节点 18+ 上工作。 Nuxt默认工作在SSR模式，因此当您进行服务器端请求（useFetch可组合）时，它会在节点服务器中处理。这就是为什么关闭 SSR 可以解决您的问题（因为请求发生在浏览器中）。 但是，我们不能称其为正确的解决方案，因为正如鲁道夫比克所说，一旦进入浏览器，您就不需要这些可组合项。 因此，降级到节点 16 可以解决您的问题（直到错误在上游得到解决）

Answer 5

我相信这个修改可以起作用

<template>
{{data}}
</template>

<script setup>
await nextTick(()=>{
   const { data, pending, error, refresh } = useFetch('https://api.nuxtjs.dev/mountains',
      {
        method: "get",
      });

  console.log(data.value);
  if (error.value) {
    console.log(error.value);
  }
})
</script>

Answer 6

将 Node 更新到 20.9 为我解决了这个问题。

Answer 7

正如@kissu所说，您需要在“useFetch”调用之前添加“await”，如文档中所示。在这种情况下，如果 Nuxt 请求渲染未提供的数据，则会抛出错误。您可以使用挂起，这样 Nuxt 就不必渲染并进一步抛出错误

<template>
{{pending ? 'loading' : data}}
</template>

<script setup>
  const { data, pending, error, refresh } = await useFetch('https://api.nuxtjs.dev/mountains',
  {
    method: "get",
  });

  if (error.value) console.log('ERROR from useFetch: ', error.value)
  if (data.value) console.log('data returned from useFetch: ', data.value)
</script>