如何利用jsfetch实现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 style={{ height: '100%'}}>
 <List>
 <Item>
 <TextInput 
 onChangeText={text => this.setState({ping: text})}
 />
 </Item>
 <Item>
 <Flex>
 <Flex.Item flex={1}><Button type="primary" onClick={this.handlePing.bind(this)}>Ping</Button></Flex.Item>
 <Flex.Item flex={1}><Button onClick={this.handleStopPing.bind(this)}>停止</Button></Flex.Item>
 </Flex>
 
 
 </Item>
 </List>
 <ScrollView style={{ height: 200,backgroundColor:"#000"}}>
 {msglist.length ? msglist.map(e => 
 <Flex>
 <Flex.Item>
 <Text style={{color: e.status === 1 ? '#87d068' : '#f50'}}>{e.msg}</Text>
 </Flex.Item>
 </Flex>):null}
 </ScrollView>
 </View>
 )
 }
}

export default PingTest