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

Question

我尝试使用Nuxt 3 中的 useFetch 可组合pending项status来禁用按钮并在 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和statususeFetch 以及为什么它们如此相似而存在感到困惑。

Answer 1

为了使pending和status起作用，您需要设置server为false。参见示例

并且，不要使用useFetch，而是使用useLazyFetch

这里有一个例子。

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

经过测试，它有效。斯塔克闪电战

我很困惑如何使用 useFetch 的挂起和状态以及为什么它们都存在（如果它们如此相似）。

不，它们并不相似。唯一pending的回报true或false。true如果 API 仍在加载，则挂起状态将设置为挂起状态false，而当 API 加载完成时，挂起状态将设置为挂起状态。对于status，这将指示所请求数据的状态。它将输出idle, pending, success, 和error