JavaScript实现获取设备网络连接信息

const connectionInfo:NetworkInformation = navigator.connection

type NetworkInformation = {
    readonly downlink:number  // Mbps
    readonly effectiveType: EffectiveConnectionType
    onchange: EventHandler
    readonly rtt:number // round trip time --> ms
}
// 每一个定义的枚举类型都有对应的参数范围的要求
enum EffectiveConnectionType {
  "2g",
  "3g",
  "4g",
  "slow-2g"
};

// Get the connection type. 
var type = navigator.connection.type; 
// Get an upper bound on the downlink speed of the first network hop
var downlink = navigator.connection.downlink; 
function changeHandler(e) { 
// Handle change to connection here. 
} 
// Register for event changes. 
navigator.connection.onchange = changeHandler;
// Alternatively. 
navigator.connection.addEventListener('change', changeHandler);

// 在组件挂载完毕
onMounted(() => {
    const effectiveType = navigator.connection.effectiveType
    switch (effectiveType) {
        case '4g':
            // 加载高质量资源
            this.imgSrc = higherSrc
            break;
        case '3g':
            // 加载稍低质量资源
            this.imgSrc = lowerSrc
            break;
        case '2g':
            // ...
            break;
        default:
            //...
            break;
    }
})

// 在组件挂载完毕后，只需执行一次
useEffect(()=>{
    const effectiveType = navigator.connection.effectiveType
    switch (effectiveType) {
        case '4g':
            // 加载高质量资源
            setImgsrc(higherSrc)
            break;
        case '3g':
            // 加载稍低质量资源
            setImgsrc(lowerSrc)
            break;
        case '2g':
            // ...
            break;
        default:
            //...
            break;
    }
},[])