useNetwork
响应式地获取 网络状态。网络信息 API 提供了有关系统连接的信息，例如一般连接类型（例如，“wifi”，“cellular”等）。这可以用于根据用户的连接选择高清晰度内容或低清晰度内容。整个 API 由 NetworkInformation 接口的添加和 Navigator 接口的单个属性组成：Navigator.connection。
Demo
isSupported: false
isOnline: true
saveData: false
type: 'unknown'
使用方法
js
import { useNetwork } from '@vueuse/core'
const { isOnline, offlineAt, downlink, downlinkMax, effectiveType, saveData, type } = useNetwork()
console.log(isOnline.value)要将其作为对象使用，请使用 reactive() 进行包装
js
import { reactive } from 'vue'
const network = reactive(useNetwork())
console.log(network.isOnline)组件使用
vue
<template>
<UseNetwork v-slot="{ isOnline, type }">
是否在线：{{ isOnline }} 类型：{{ type }}
</UseNetwork>
</template>类型声明
显示类型声明
typescript
export type NetworkType =
| "bluetooth"
| "cellular"
| "ethernet"
| "none"
| "wifi"
| "wimax"
| "other"
| "unknown"
export type NetworkEffectiveType = "slow-2g" | "2g" | "3g" | "4g" | undefined
export interface NetworkState {
isSupported: Readonly<Ref<boolean>>
/**
* 用户当前是否连接到网络。
*/
isOnline: Readonly<Ref<boolean>>
/**
* 用户上次连接到网络的时间。
*/
offlineAt: Readonly<Ref<number | undefined>>
/**
* 在此时间点，如果用户处于离线状态并重新连接。
*/
onlineAt: Readonly<Ref<number | undefined>>
/**
* 下载速度，以 Mbps 为单位。
*/
downlink: Readonly<Ref<number | undefined>>
/**
* 可达到的最大下载速度，以 Mbps 为单位。
*/
downlinkMax: Readonly<Ref<number | undefined>>
/**
* 检测到的有效速度类型。
*/
effectiveType: Readonly<Ref<NetworkEffectiveType | undefined>>
/**
* 当前连接的预估往返时间。
*/
rtt: Readonly<Ref<number | undefined>>
/**
* 用户是否启用了数据节省模式。
*/
saveData: Readonly<Ref<boolean | undefined>>
/**
* 检测到的 connection/network 类型。
*/
type: Readonly<Ref<NetworkType>>
}
/**
* 响应式网络状态。
*
* @see https://vueuse.org/useNetwork
* @param options
*/
export declare function useNetwork(
options?: ConfigurableWindow,
): Readonly<NetworkState>
export type UseNetworkReturn = ReturnType<typeof useNetwork>Source
贡献者
Anthony Fu
丶远方
Jelf
Anthony Fu
Daniil Rudnov
vaakian X
Kirk Lin
Lexpeartha
webfansplz
wheat
Alex Kozack
Antério Vieira