jsフェッチを使用してping効果を実現する方法

この記事では、主に ping 効果を実現するための js フェッチの使用方法を紹介します。必要な友達はそれを参照できるようになりました。場合によっては、WMS ハンドヘルドがインターネットに接続されていても、実際には Web ページにアクセスできないことがあります。インターネット上にある解決策のほとんどは、私も試してみました。効果が良くないようですので、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中国語ウェブサイトです！

関連する推奨事項:

反応する親コンポーネントと子コンポーネント間の値の転送の問題の分析について

JavaScript読み込みの分析

以上がjsフェッチを使用してping効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。