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

Question

我尝试在 Nuxt 3 中使用

pending

或

status

与 useFetch 可组合项来禁用按钮并在 POST 请求挂起时显示微调器，如下所示：

const { pending, status, execute } = await useFetch("/notifyme", {
  immediate: false,
  baseURL: config.public.apiBase,
  method: "POST",
  body: {
    email: email.value,
  },
});

当使用如下所示的

pending

时，即使在发出请求之前，该按钮也会被禁用，并且默认情况下会显示微调器：

<button
:disabled="pending"
type="submit">
Notify me
<ButtonSpinner v-show="pending" />
</button>

当使用

status

时，如下所示，该按钮不会被禁用，并且在发出请求时不会显示微调器：

<button
:disabled="status==='pending'"
type="submit">
Notify me
<ButtonSpinner v-show="status==='pending'" />
</button>

我很困惑如何使用

pending

和

status

进行 useFetch 以及为什么它们都存在（如果它们如此相似）。

Answer 1

为了使

pending

和

status

工作，您需要将

server

设置为

false

。像这样的东西。

并且，不要使用

useFetch

，而是使用

useLazyFetch

这是一个例子。

const { data, pending, execute, status } = await useLazyFetch('https://catfact.ninja/fact', {
    server: false
})

经过测试，有效。 堆栈闪电战

Answer 2

也许这会有所帮助，

我认为

pending

仅在

lazy: true

时可用

const { pending, status, execute } = await useFetch("/notifyme", {
 immediate: false,
 baseURL: config.public.apiBase,
 method: "POST",
 body: {
  email: email.value,
 },
 lazy: true
});

或者您可以使用

useLazyFetch 

而不使用

lazy: true

参数