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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to call the method of child component in React parent component
Dec 27, 2022 pm 07:01 PM
Calling method: 1. Calls in class components can be implemented by using React.createRef(), functional declaration of ref or props custom onRef attribute; 2. Calls in function components and Hook components can be implemented by using useImperativeHandle or forwardRef to throw a child Component ref is implemented.
In-depth understanding of React's custom Hooks
Apr 20, 2023 pm 06:22 PM
React custom Hooks are a way to encapsulate component logic in reusable functions. They provide a way to reuse state logic without writing classes. This article will introduce in detail how to customize encapsulation hooks.
How to debug React source code? Introduction to debugging methods using multiple tools
Mar 31, 2023 pm 06:54 PM
How to debug React source code? The following article will talk about how to debug React source code under various tools, and introduce how to debug the real source code of React in contributors, create-react-app, and vite projects. I hope it will be helpful to everyone!
Why React doesn't use Vite as the first choice for building apps
Feb 03, 2023 pm 06:41 PM
Why doesn’t React use Vite as the first choice for building applications? The following article will talk to you about the reasons why React does not recommend Vite as the default recommendation. I hope it will be helpful to everyone!
How to set div height in react
Jan 06, 2023 am 10:19 AM
How to set the div height in react: 1. Implement the div height through CSS; 2. Declare an object C in the state and store the style of the change button in the object, then get A and reset the "marginTop" in C. That is Can.
7 great and practical React component libraries (shared under pressure)
Nov 04, 2022 pm 08:00 PM
This article will share with you 7 great and practical React component libraries that are often used in daily development. Come and collect them and try them out!
10 practical tips for writing cleaner React code
Jan 03, 2023 pm 08:18 PM
This article will share with you 10 practical tips for writing simpler React code. I hope it will be helpful to you!
Let's talk about the differences in design and implementation between Vuex and Pinia
Dec 07, 2022 pm 06:24 PM
When developing front-end projects, state management is always an unavoidable topic. The Vue and React frameworks themselves provide some capabilities to solve this problem. However, there are often other considerations when developing large-scale applications, such as the need for more standardized and complete operation logs, time travel capabilities integrated in developer tools, server-side rendering, etc. This article takes the Vue framework as an example to introduce the differences in the design and implementation of the two state management tools, Vuex and Pinia.
