如何在Nuxt 3中使用useFetch中的pending和status？

在Nuxt 3中，useFetch 是一个非常强大的组合式 API，它可以帮助开发者在服务端或者客户端去获取数据，并且非常方便地处理加载状态和响应状态。在您的项目中合理地使用 pending 和 status 属性，可以让用户体验更流畅，同时也可以使得开发过程中对数据状态的处理更加清晰。

使用 pending

pending 是一个布尔值，表明请求是否正在进行中。这在你需要显示加载指示器或者其他加载状态提示时非常有用。

示例：

假设我们需要从一个API获取用户数据，页面在加载数据时应显示加载中状态。

vue
<template>
  <div>
    <p v-if="isPending">加载中...</p>
    <p v-else>{{ userData.name }}</p>
  </div>
</template>

<script setup>
import { useFetch } from '#app'

const { data: userData, pending: isPending } = useFetch('/api/user')
</script>

在这个示例中，当 isPending 为 true，即数据正在被获取时，页面会显示“加载中...”。一旦数据加载完成，isPending 变为 false，页面就会显示用户的名称。

使用 status

status 是一个响应状态码，可以用来判断请求的结果（如200, 404, 500等）。这对于错误处理和根据不同的响应状态显示不同的信息很有帮助。

示例：

继续使用上面的用户数据获取例子，我们可以根据不同的响应状态显示不同的信息。

vue
<template>
  <div>
    <p v-if="isPending">加载中...</p>
    <p v-else-if="status === 200">{{ userData.name }}</p>
    <p v-else-if="status === 404">未找到用户信息。</p>
    <p v-else>加载失败，请稍后重试。</p>
  </div>
</template>

<script setup>
import { useFetch } from '#app'

const { data: userData, pending: isPending, status } = useFetch('/api/user')
</script>

在这个例子中，我们根据 status 的不同值来决定显示的内容。如果状态码是200，则显示用户名称；如果状态码是404，提示“未找到用户信息”；对于其他状态码，则显示通用错误信息。

总结

在Nuxt 3中使用 useFetch 的 pending 和 status 可以有效地管理数据加载过程中的不同状态，提升用户体验并使得开发过程中的状态处理更加明确。通过合理利用这些属性，可以在应用中实现更加丰富和友好的交互效果。