Next.js中基于Axios实现可手动停止的连续请求的最佳实践

问题根因 #

你遇到的循环内state不更新的核心原因是闭包快照问题：onSubmit 异步函数执行时捕获了当时的 close 状态值，后续React更新close状态不会影响已执行函数闭包内的旧值。同时死循环会占用执行栈，也容易引发请求泄露、页面卡顿等问题。

最优实现方案 #

完全不需要引入Redux，用React原生的useRef+AbortController+递归请求即可实现，代码如下：

第一步：定义状态与辅助ref #

import { useState, useRef, useEffect } from 'react'
const [close, closeButton] = useBoolean() // 原有的停止按钮状态
const [proto, setProto] = useState('TCP') // 原有的协议选择状态
// 新增ref：存储停止标识（不受闭包影响）、当前请求的取消控制器
const stopFlagRef = useRef(false)
const abortControllerRef = useRef(null)

第二步：同步状态到ref，处理停止/协议变更逻辑 #

// 同步停止按钮状态到ref，按下停止时主动取消当前请求
useEffect(() => {
  stopFlagRef.current = close
  if (close && abortControllerRef.current) {
    abortControllerRef.current.abort()
  }
}, [close])

// 协议变更时终止当前请求序列，自动用新协议重启监听
useEffect(() => {
  if (!stopFlagRef.current && abortControllerRef.current) {
    abortControllerRef.current.abort()
    onSubmit()
  }
}, [proto])

第三步：改造请求函数，用递归代替死循环 #

const onSubmit = async () => {
  // 已触发停止则直接终止请求序列
  if (stopFlagRef.current) return
  // 每次请求新建取消控制器
  abortControllerRef.current = new AbortController()
  const reqType = proto ? 'UDP' : 'TCP'
  try {
    // 给请求传入取消信号，方便主动终止
    const res = await serverRequest(reqType, {
      signal: abortControllerRef.current.signal
    })
    console.log(res.messageFromClient)
    // 处理完当前请求后递归调用，实现持续监听效果
    onSubmit()
  } catch (err) {
    // 主动取消的请求忽略报错
    if (err.name !== 'AbortError') {
      console.error('请求异常：', err)
      // 可自行增加异常重试逻辑，例：出错后1秒重启监听
      setTimeout(onSubmit, 1000)
    }
  }
}

第四步：适配serverRequest的取消信号（以fetch为例） #

const serverRequest = async (reqType, options = {}) => {
  return fetch('/api/your-server-endpoint', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ reqType }),
    ...options
  }).then(res => res.json())
}

方案优势 #

• 用useRef存储停止标识，完全规避闭包旧值问题，停止按钮状态更新可即时生效
• 用递归代替死循环，不会阻塞事件循环，页面运行流畅
• 基于AbortController实现主动取消请求，无 pending 请求泄露
• 天然适配业务场景：每次处理完客户端请求后自动重启监听，协议变更时自动重启请求序列

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