How to use js fetch to achieve ping effect

This article mainly introduces how to use js fetch to achieve the ping effect. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

The actual business has finally arrived. In part There may be factors of network instability in the environment. Sometimes the wms handheld is connected to the Internet but cannot actually access the web page. It is very embarrassing.
Most of the solutions found on the Internet are implemented through images. I have also referred to them, but it seems The effect was not good
So I used fetch to write a

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

The above is the entire content of this article. I hope it will be helpful to everyone’s study. Please pay attention to more related content. PHP Chinese website!

Related recommendations:

About analysis of value transfer issues between react parent and child components

Analysis of Javascript loading

The above is the detailed content of How to use js fetch to achieve ping effect. For more information, please follow other related articles on the PHP Chinese website!