TANSTACK Query中,isFetching,isLoading,isPending的区别

三个主要状态解释

先明确几个状态的含义（基于 TanStack Query 最新版本）：

• isFetching
  — 只要有请求正在进行（包括初次拉取 + 重试 + 后台刷新等），就会是true。TanStack

• isLoading
  — 只在**第一次 fetch（初始加载）**期间是true。等第一个请求结束（无论成功还是失败），就变成false。
  — 等价于：isFetching && isPending（v5 的新术语）TanStack

• isPending
  — 表示当前是在等待某个 fetch 执行（最初或重试中）。它和isFetching类似但更精细（用于区分“初始”和“后台”状态）。TanStack

🤔 在设置retry: 5时状态如何变化？

假设你的请求第一次失败了，需要重试 5 次：

✔ 初次请求阶段

• 第一次请求正在发送 →
  isFetching = true,isLoading = true,isPending = true

✔ 第一次失败后开始重试之前

React Query 默认会按退避策略延迟一段时间再发起下一次尝试。TanStack
这段短暂的延迟期间：

• 没有活跃的请求在执行
  所以：

  • isFetching = false

  • isPending = false

• 是否显示加载指示器取决于你 UI 的逻辑

  • 对用户来讲可能要显示“重试中…”

  • 但 React Query 本身没把 retry 的延迟期算作 fetching。

✔ 在每次重试的 fetch 执行中

在实际发起重试请求的那一刻：

• 请求开始 →
  isFetching = true

• 如果是重试过程，并非第一次成功 →
  isLoading通常是false（因为不是首次加载）

• isPending可能会在某些状态组合下和isFetching共同为true（取决于版本和细节）TanStack

✔ 重试全部失败后

最终如果 5 次都失败：

• 不再有 pending fetch →
  isFetching = false
isLoading = false
isPending = false

• isError=true，错误信息出现在error属性里。

总结

所以：

✅不是在 5 次重试期间这三个状态一直是true。
❌ 在“重试延迟期”里这些状态是false。
⚠️isLoading特别只和首次加载相关。

📌 你可以如何显示“重试中”状态？

如果你想显示“正在执行重试”的 UI，可以结合：

const { isFetching, failureCount } = useQuery(...); 比如： if (isFetching && failureCount > 0) { return <span>重试中… (第 {failureCount} 次)</span> }