为何Axios的GET/POST请求在5次按钮触发后超时？

核心原因 #

你的问题出在Express服务器的POST接口未发送响应，导致每个请求都处于挂起状态，占用了客户端的HTTP连接池资源。不同平台的HTTP并发连接数上限不同（Web端通常是6，Android/iOS有各自的限制），当达到上限后，新的请求无法建立连接，就会出现断开或超时的情况。

修复步骤 #

1. 修复Express服务器的POST接口 #

HTTP协议要求每个请求都必须有对应的响应，你的/play接口只打印了请求体，但没有向客户端发送任何响应，导致连接一直无法释放。修改服务器代码：

//server
router.get("/connect", (req, res) => {
    res.send("Server Connected")
})

router.post("/play", async(req, res) => {
    const resser = req.body // req.body已被Express解析，无需await
    console.log(resser)
    // 必须添加响应，告知客户端请求处理完成
    res.status(200).send("请求已接收")
    // 也可以用极简方式结束响应：res.end()
})

2. 客户端代码优化（可选） #

• 避免组件重复发起连接请求：当前代码中/connect请求写在组件顶层，每次组件渲染都会重复发起，建议移到useEffect中：
• 优化状态更新与请求体处理：使用函数式更新避免闭包问题，Axios会自动序列化JSON，无需手动调用JSON.stringify

//client
const [i, setI] = useState(0)
const [connecter, setConnecter] = useState()
const mainURL = "http://192.168.0.26:8080/usr"

const func = () => {
    setI(prev => prev + 1)
    const datas = {
        val : `counter! ${i + 1}`
    }
    axios({
        method: 'post',
        url: `${mainURL}/play`,
        data: datas,
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        maxContentLength: Infinity,
        maxBodyLength: Infinity
    })
    .then(() => {
       console.log("sent!")
    })
    .catch(err => console.log(err))
};

useEffect(() => {
    // 组件挂载时仅发起一次连接请求
    axios.get(`${mainURL}/connect`, {
        headers:{"Content-Type": "application/json"}
    })
    .then((res) => {
        setConnecter(res.status)  
    }).catch((err) => setConnecter(err))
}, [])

内容的提问来源于stack exchange，提问作者AdyRay