为什么 axios get + post 请求在 5 个按钮请求后超时？

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 .