[FIXED] why is axios get + post request timing out after 5 button requests?

Issue

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)
})

Solution

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.

Answered By - Louay Sleman

Answer Checked By - David Marino (PHPFixing Volunteer)