Nuxt 3 useFetch有时返回null

Question

我想从HTTP获取一些数据，并将其显示在页面上：

<template>
  <div>
   Kyiv Time: {{ timeData.utc_datetime }}
  </div>
</template>

<script setup>
const { data: timeData } = await useFetch('https://worldtimeapi.org/api/timezone/Europe/Kiev')
</script>

有时页面加载正确，有时我在模板中得到一个错误Cannot read properties of null (reading 'utc_datetime')。所以，等待并不是真正等待HTTP请求。

如何在SSR (以及客户端)期间等待HTTP请求？

我的nuxt配置是空的，这里是项目资料来源

Answer 1

您不仅应该检查data，还应该检查error。如果取时(例如超时)发生错误，则data将为null。

您可以在模板中处理这一问题：

<div v-if="data">
...
</div>
<div v-else>
...
</div>

或者在脚本中抛出错误：

if (error.value) {
  throw createError(...)
}