TanStack中isLoading与isFetching的心智模型及缓存场景疑问

1. 基础场景下的心智模型构建 #

核心要抓住「是否存在可用数据」这个关键区分点：

• isLoading：代表「完全无可用数据」的初始状态——不管是缓存还是后端返回的数据都没有，当前正在首次发起请求获取数据。简单说就是“第一次拿数据，啥都没有，正在等结果”。
• isFetching：代表「已有可用数据，但正在更新数据」的状态——此时页面已经能展示旧数据（可能是之前请求的结果，也可能是缓存数据），但当前正在发起新的请求（比如手动刷新、后台自动验证数据）。

举个实际例子：

• 首次打开用户列表页面：一开始isLoading和isFetching同时为true，因为没有任何数据且正在发起请求；
• 数据返回后，两个状态都变为false；
• 点击刷新按钮重新拉取列表：isFetching变为true，isLoading保持false，因为旧数据还能正常展示。

2. 缓存场景下的心智模型定义 #

即使数据来自缓存，核心逻辑还是围绕「是否有可用数据」和「是否在发起后端请求」：

• isLoading：只有当缓存中完全没有对应数据时才会触发。比如第一次请求某数据时缓存未命中，此时发起API请求，isLoading为true；只要缓存里有数据（哪怕是过期的旧数据），isLoading就始终为false。
• isFetching：只在「正在和后端交互更新数据」时为true：
  • 比如缓存数据过期后，后台自动发起请求更新缓存，此时isFetching为true；
  • 如果只是直接读取缓存、没有发起任何API请求，isFetching则为false。

举个缓存场景的例子：

• 第二次打开用户列表页面：缓存里有之前的列表数据，页面直接读取缓存，isLoading和isFetching都为false；
• 若缓存数据已过staleTime，后台自动发起请求更新数据，此时isFetching变为true，isLoading仍为false，因为旧缓存数据还能用于展示。

内容的提问来源于stack exchange，提问作者Abdul Rehman Irfan