Comment utiliser js fetch pour obtenir un effet ping

Cet article présente principalement comment utiliser js fetch pour obtenir un effet ping. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Les affaires réelles sont enfin là. En partie Il peut y avoir des facteurs d'instabilité du réseau dans l'environnement. Parfois, l'ordinateur de poche wms est connecté à Internet mais ne peut pas réellement accéder à la page Web, ce qui est très embarrassant
La plupart des solutions trouvées en ligne sont mises en œuvre via des images dont je dispose. y a également fait référence, mais il semble que l'effet n'était pas bon
J'ai donc utilisé fetch pour en écrire un

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

Ce qui précède est tout le contenu de cet article .J'espère que cela sera utile à l'étude de tout le monde. Plus de contenu connexe Veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse des problèmes de transfert de valeur entre les composants parent et enfant de réaction

Analyse du chargement Javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!