這篇文章主要介紹了關於如何利用js fetch實現ping效果,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
實際業務終於到的,在部分環境中可能存在網路不穩定的因素,wms手持有時候連網了但實際訪問不到網頁,很是尷尬
網路上找到的大多數方案是透過image去實現的,我也曾參照過,但似乎效果不好
於是利用fetch寫了個
import React, { Component } from 'react' import { View,TextInput,ScrollView,Text } from 'react-native' import { List, Button,Flex } from 'antd-mobile' const Item = List.Item class PingTest extends Component { constructor(props) { super(props) // 初始状态 this.state = { ping:'', msglist:[], } this.cycle = null } pingCycle = () => { const { ping,msglist } = this.state const start = (new Date()).getTime() fetch(`http://${ping}`).then(() => { const delta = (new Date()).getTime() - start if (delta > 5000) { msglist.push({ status: 0, msg: `ping ${ping} 连接超时`, }) } else { msglist.push({ status: 1, msg: `ping ${ping} time=${delta} ms`, }) } this.setState({ msglist, }) }).catch((err) => { msglist.push({ status: 0, msg: `ping ${ping} 连接失败`, }) this.setState({ msglist, }) }) } handlePing = () => { this.cycle = setInterval(this.pingCycle,1000) } handleStopPing = () => { clearInterval(this.cycle) } render() { const {msglist} = this.state return ( <view> <list> <item> <textinput> this.setState({ping: text})} /> </textinput></item> <item> <flex> <flex.item><button>Ping</button></flex.item> <flex.item><button>停止</button></flex.item> </flex> </item> </list> <scrollview> {msglist.length ? msglist.map(e => <flex> <flex.item> <text>{e.msg}</text> </flex.item> </flex>):null} </scrollview> </view> ) } } export default PingTest
#以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
以上是如何利用js fetch實現ping效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!