OnlineManager | TanStack Query Docs

OnlineManager

OnlineManager 管理 TanStack Query 中的在线状态。它可用于更改默认事件侦听器或手动更改在线状态。

默认情况下，onlineManager 假定存在活动的网络连接，并侦听 window 对象上的 online 和 offline 事件以检测更改。

在以前的版本中，使用 navigator.onLine 来确定网络状态。但是，它在基于 Chromium 的浏览器中效果不佳。存在许多问题围绕假阴性，这导致查询被错误地标记为 offline。

为了规避这个问题，我们现在总是以 online: true 开始，并且只侦听 online 和 offline 事件来更新状态。

这应该会降低假阴性的可能性，但是，对于通过 serviceWorker 加载的离线应用程序（即使没有互联网连接也可以工作），这可能意味着假阳性。

其可用方法有：

setEventListener
subscribe
setOnline
isOnline

onlineManager.setEventListener

setEventListener 可用于设置自定义事件侦听器：

tsx

import NetInfo from '@react-native-community/netinfo'
import { onlineManager } from '@tanstack/react-query'

onlineManager.setEventListener((setOnline) => {
  return NetInfo.addEventListener((state) => {
    setOnline(!!state.isConnected)
  })
})

import NetInfo from '@react-native-community/netinfo'
import { onlineManager } from '@tanstack/react-query'

onlineManager.setEventListener((setOnline) => {
  return NetInfo.addEventListener((state) => {
    setOnline(!!state.isConnected)
  })
})

onlineManager.subscribe

subscribe 可用于订阅在线状态的更改。它返回一个取消订阅函数：

tsx

import { onlineManager } from '@tanstack/react-query'

const unsubscribe = onlineManager.subscribe((isOnline) => {
  console.log('isOnline', isOnline)
})

import { onlineManager } from '@tanstack/react-query'

const unsubscribe = onlineManager.subscribe((isOnline) => {
  console.log('isOnline', isOnline)
})

onlineManager.setOnline

setOnline 可用于手动设置在线状态。

tsx

import { onlineManager } from '@tanstack/react-query'

// 设置为在线
onlineManager.setOnline(true)

// 设置为离线
onlineManager.setOnline(false)

import { onlineManager } from '@tanstack/react-query'

// 设置为在线
onlineManager.setOnline(true)

// 设置为离线
onlineManager.setOnline(false)

选项

online: boolean

onlineManager.isOnline

isOnline 可用于获取当前在线状态。

tsx

const isOnline = onlineManager.isOnline()

const isOnline = onlineManager.isOnline()