首页 > web前端 > js教程 > 如何利用js fetch实现ping效果

如何利用js fetch实现ping效果

不言
发布: 2018-07-11 16:04:34
原创
2544 人浏览过

这篇文章主要介绍了关于如何利用js fetch实现ping效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

实际业务终于到的,在部分环境中可能存在网络不稳定的因素,wms手持有时候联网了但实际访问不到网页,很是尴尬
网上找到的大多数方案是通过image去实现的,我也曾参照过,但似乎效果不好
于是利用fetch写了个

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

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: &#39;100%&#39;}}>

          <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 ? &#39;#87d068&#39; : &#39;#f50&#39;}}>{e.msg}</Text>

                </Flex.Item>

              </Flex>):null}

          </ScrollView>

      </View>

    )

  }

}

 

export default PingTest

登录后复制

3437791867-5b45906ca23ca_articlex[1].png

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

关于react父子组件之间的传值问题解析

对于Javascript加载的解析

以上是如何利用js fetch实现ping效果的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板