使用useSWR hook时如何跳过首次加载的refresh token定时调用

不需要额外写useEffect控制状态标记，也不需要计数器逻辑，SWR本身提供了配置项直接支持该需求。

核心配置为revalidateOnMount: false，设置后会跳过组件挂载阶段的自动请求触发，已配置的refreshInterval轮询逻辑不受影响，会在组件挂载后按设定的时间间隔正常发起请求，完全匹配跳过首次初始化调用、仅按固定周期刷新token的要求。

调整后的完整代码 #

useSWR(
  isAuthenticated ? "/api/v1/refresh-token" : null,
  async (url) => axios
    .post(url, { refreshToken }, {
      headers: { Authorization: `Bearer ${token}` }
    })
    .then((result) => result.data),
  {
    refreshInterval: x, // 传入需要的轮询间隔，单位为毫秒
    revalidateOnMount: false, // 核心配置：跳过挂载后的首次自动调用
    // 以下为可选优化配置，可根据业务需求选择开启
    refreshWhenHidden: false, // 页面切到后台时暂停轮询，减少无效请求
    revalidateOnReconnect: false, // 网络恢复时不自动触发请求，等待下一个轮询周期
    revalidateOnFocus: false, // 页面重新获得焦点时不自动触发请求，避免打乱固定轮询节奏
    onSuccess: (session) => {
      setToken(session.access_token)
      setRefreshToken(session.refresh_token)
      // 建议同步更新localStorage存储的token，避免页面刷新后读到旧值
      localStorage.setItem('access_token', session.access_token)
      localStorage.setItem('refresh_token', session.refresh_token)
    }
  }
)

注意事项 #

• revalidateOnMount配置在SWR 1.0及以上版本均原生支持，不需要引入额外依赖或编写自定义hack逻辑
• 该场景本身已经在应用初始化时从localStorage读取token存入状态，不需要依赖SWR挂载时的首次请求填充数据，完全适配revalidateOnMount: false的逻辑，不会出现初始token状态为空的问题
• 如果需要适配页面长时间后台挂起的场景，可以搭配dedupingInterval配置做请求去重，避免短时间内重复调用刷新接口

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