這篇文章主要介紹了關於如何利用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中文網其他相關文章！
