PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, October 13, 2022

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

 October 13, 2022     axios, express, fetch, react-native, reactjs     No comments   

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)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing