Skip to content
文档
自动重新请求

自动重新请求

💡

如果你想手动重新请求数据,请查看 mutation

聚焦时重新请求

当你重新聚焦一个页面或在标签页之间切换时,SWR 会自动重新请求数据。

这个功能非常实用,可以保持网站同步到最新数据。对于在长时间位于后台的标签页,或 休眠 的电脑等情况下刷新数据也很有帮助。

视频:使用聚焦时重新验证在页面间自动同步登陆状态。

该特性默认是启用的。你可以通过 revalidateOnFocus 选项禁用它。

定期重新请求

在很多情况下,数据会因为多个设备、多个用户、多个选项卡而发生改变。那么我们如何随着时间的推移更新屏幕上的数据呢?

SWR 会为你提供自动重新请求数据的选项。这很 智能,意味着只有与 hook 相关的组件 在屏幕上 时,才会重新请求。

视频:当用户进行更改时,两个会话最终将呈现相同的数据。

你可以通过设置 refreshInterval 值来启用它:

useSWR('/api/todos', fetcher, { refreshInterval: 1000 })

还有其他选项,例如 refreshWhenHiddenrefreshWhenOffline。这两项默认都是禁用的,所以当网页不在屏幕上或没有网络连接时,SWR 不会请求。

重新连接时重新请求

当用户重新联机时重新请求非常有用。这种情况经常发生在用户解锁了他们的计算机但网络还没有连上时。

为了确保数据始终是最新的,SWR 会在网络恢复时自动重新请求。

该特性默认是启用的。你可以通过 revalidateOnReconnect 选项禁用它。

禁用自动重新请求

如果资源是不可变的,即使我们再怎么重新请求也永远不会发生任何改变,那么我们可以禁用它的所有的自动重新请求。

从 1.0 版本开始,SWR 提供了一个辅助 hook useSWRImmutable 来标记资源为不可变的:

import useSWRImmutable from 'swr/immutable'
 
// ...
useSWRImmutable(key, fetcher, options)

它具有与普通 useSWR hook 相同的 API 接口。你还可以通过禁用以下重新请求​​选项来执行相同的操作:

useSWR(key, fetcher, {
  revalidateIfStale: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false
})
 
// 相当于
useSWRImmutable(key, fetcher)

revalidateIfStale 控制 SWR 在挂载并且存在陈旧数据时是否应重新请求。

上面这两个 hook 做完全相同的事情。一旦数据被缓存,他们将永远不会再次请求它。

Revalidate on Mount

It's useful to force override SWR revalidation on mounting. By default, the value of revalidateOnMount is set to undefined.

A SWR hook mounts as:

  • First it checks if revalidateOnMount is defined. It starts request if it's true, stop if it's false.

revalidateIfStale useful to control the mount behaviour. By default revalidateIfStale is set to true.

If revalidateIfStale is set to true it only refetches if there's any cache data else it will not refetch.