如何利用jsfetch實(shí)現(xiàn)ping效果

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:33:50

如何利用jsfetch實(shí)現(xiàn)ping效果

如何利用jsfetch實(shí)現(xiàn)ping效果:這篇文章主要介紹了關(guān)于如何利用js fetch實(shí)現(xiàn)ping效果，有著一定的參考價(jià)值，現(xiàn)在分享給大家，有需要的朋友可以參考一下實(shí)際業(yè)務(wù)終于到的，在部分環(huán)境中可能存在網(wǎng)絡(luò)不穩(wěn)定的因素，wms手持有時(shí)候聯(lián)網(wǎng)了但實(shí)際訪問不到網(wǎng)頁(yè)，很是尷尬網(wǎng)上找到的大多數(shù)方案是通

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀如何利用jsfetch實(shí)現(xiàn)ping效果:這篇文章主要介紹了關(guān)于如何利用js fetch實(shí)現(xiàn)ping效果，有著一定的參考價(jià)值，現(xiàn)在分享給大家，有需要的朋友可以參考一下實(shí)際業(yè)務(wù)終于到的，在部分環(huán)境中可能存在網(wǎng)絡(luò)不穩(wěn)定的因素，wms手持有時(shí)候聯(lián)網(wǎng)了但實(shí)際訪問不到網(wǎng)頁(yè)，很是尷尬網(wǎng)上找到的大多數(shù)方案是通

這篇文章主要介紹了關(guān)于如何利用js fetch實(shí)現(xiàn)ping效果，有著一定的參考價(jià)值，現(xiàn)在分享給大家，有需要的朋友可以參考一下

實(shí)際業(yè)務(wù)終于到的，在部分環(huán)境中可能存在網(wǎng)絡(luò)不穩(wěn)定的因素，wms手持有時(shí)候聯(lián)網(wǎng)了但實(shí)際訪問不到網(wǎng)頁(yè)，很是尷尬
網(wǎng)上找到的大多數(shù)方案是通過image去實(shí)現(xiàn)的，我也曾參照過，但似乎效果不好
于是利用fetch寫了個(gè)

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)
 // 初始狀態(tài)
 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} 連接超時(shí)`,
 })
 } 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

3437791867-5b45906ca23ca_articlex[1].png