why is axios get + post request timing out after 5 button requests? - reactjs

Question

I'm attempting to get and post data using axios from server (express, axios, react native) and after 5x pressing the button it disconnects from server.
please see web example - console log
Is there a default timeout after 5 or 6 request calls - iOS is 3 calls before disconnect - android 5 calls before disconnect - web 6 calls - it varies across platforms. Logs perfectly fine until disconnect.
//client:
const [i, setI] = useState(0)
const [connecter, setConnecter] = useState()
const mainURL = "http://192.168.0.26:8080/usr"
const datas = {
val : "counter!" + " " + i
}
const func = () => {
setI(i + 1)
axios({
method: 'post',
url: mainURL + "/play",
data: JSON.stringify(datas),
headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
maxContentLength: Infinity,
maxBodyLength: Infinity
})
.then(() => {
console.log("sent!")
})
.catch(err => console.log(err))
};
const red = axios.get(mainURL + "/connect",
{headers:{"Content-Type": "application/json"}})
.then((res) => {
setConnecter(res.status)
}).catch((err) => setConnecter(err))
useEffect(() => {
}, [red])
//server
router.get("/connect", (req, res) => {
res.send("Server Connected")
})
router.post("/play", async(req, res) => {
const resser = await req.body
console.log(resser)
})

Answer 1

You can try using this code:
import * as React from 'react';
import {useEffect, useState} from 'react';
import { Button, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import * as axios from "axios";
export default function App() {
const mainURL = "http://192.168.0.26:8080/usr";
const [counter, setCounter] = useState(0);
const [connecter, setConnecter] = useState(null);
const [data, setData] = useState({
val: `counter! ${counter}`
});
useEffect(() => {
setData({
val: `counter! ${counter}`
});
}, [counter]);
const callApi = async () => {
try {
const connectRes = await axios.post('https://reqres.in/api/users', JSON.stringify(data), { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }});
console.log(connectRes);
setConnecter(connectRes);
const result = await axios.get('https://reqres.in/api/products/3', { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }});
setCounter(prev => prev + 1);
console.log(counter);
console.log(result);
} catch (e) {
console.log('error', e);
}
}
return (
<View style={styles.container}>
<Button title="test" onPress={() => callApi()} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
you can check this working example from here.