Nuxt 3中useFetch的pending与status使用方法及问题咨询

核心问题：错误使用await解构useFetch返回值 #

你的代码里在useFetch前加了await，这是导致两个问题的根本原因：

• 当immediate: false时，useFetch不会立即发起请求，此时await会阻塞组件初始化，且解构出的pending、status不再是响应式的ref，而是固定的初始值，导致视图无法跟随请求状态更新。

修正后的基础代码 #

首先移除await，并将body改为函数式返回（确保每次调用execute时获取最新的email值）：

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

问题1：pending初始导致按钮禁用的解决 #

修正后，pending是响应式的ref，初始值为false（未发起请求时），只有调用execute后才会变为true。按钮代码保持不变即可正常工作：

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

问题2：status判断pending不生效的解决 #

修正后，status是响应式的ref，初始值为'idle'，请求发起后变为'pending'，请求完成后变为'success'或'error'。此时按钮代码的判断会正常触发：

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

pending和status的区别与存在意义 #

• pending：布尔类型的快捷状态，仅区分「是否有请求在进行中」，适合快速实现加载状态的显示/隐藏、按钮禁用等简单逻辑。
• status：字符串类型的细粒度状态，包含'idle'（未发起请求）、'pending'（请求中）、'success'（请求成功）、'error'（请求失败）四种状态，适合需要区分不同阶段逻辑的场景（比如未发起时显示默认文案，失败时显示错误提示）。

两者同时存在是为了满足不同复杂度的业务需求：简单场景用pending更简洁，复杂状态流转用status更灵活。

内容的提问来源于stack exchange，提问作者Steve