ReactJS实现组件渲染后每20秒轮询API 匹配指定响应即停止

实现逻辑 #

核心是对齐三个时机的处理：

• 组件首次渲染完成时启动轮询
• 每20秒固定发起一次GET请求
• 接口返回三个字段全为Success时立刻停止轮询，组件卸载时同步清理轮询避免内存泄漏

避坑要点 #

• 不要用普通变量存储定时器ID，组件重渲染会重置变量导致无法正确清除定时器，推荐用useRef存储定时器ID，可跨渲染周期保留引用
• 必须写清理逻辑：组件卸载、轮询满足停止条件两个场景都要清除定时器，避免出现内存泄漏、控制台报「已卸载组件上更新状态」的警告
• 接口响应后第一时间做条件判断，满足停止条件就立刻终止轮询，不要等下一个20秒周期
• 如果需要渲染完成立刻拿到第一次结果，可以在启动定时器前先手动调用一次接口，不用等第一个20秒间隔

函数组件代码示例 #

import { useEffect, useRef, useState } from 'react';

// 替换为项目中实际的GET请求封装，示例用原生fetch实现
const fetchTaskStatus = async () => {
  const response = await fetch('/your-task-status-api-path');
  if (!response.ok) throw new Error('接口请求异常');
  return response.json();
};

export default function TaskPollComponent() {
  // 可选：存储接口返回状态用于页面渲染
  const [taskStatus, setTaskStatus] = useState({
    firstWork: '',
    SecondWork: '',
    ThirdWork: ''
  });
  // 存储定时器ID
  const pollTimerRef = useRef(null);

  // 轮询执行逻辑
  const runPoll = async () => {
    try {
      const resData = await fetchTaskStatus();
      setTaskStatus(resData);

      // 校验停止条件：三个字段均为Success
      const allTaskSuccess = 
        resData.firstWork === 'Success'
        && resData.SecondWork === 'Success'
        && resData.ThirdWork === 'Success';

      if (allTaskSuccess) {
        clearInterval(pollTimerRef.current);
        pollTimerRef.current = null;
        // 此处可追加所有任务完成后的业务逻辑，比如成功提示、页面跳转等
      }
    } catch (error) {
      console.error('轮询请求失败:', error);
      // 可按需自定义错误逻辑，比如失败重试次数上限、失败后停止轮询等
    }
  };

  useEffect(() => {
    // 渲染完成后先执行一次请求，不需要首次立刻调用可以删除这行
    runPoll();
    // 启动20秒间隔轮询
    pollTimerRef.current = setInterval(runPoll, 20000);

    // 组件卸载时的清理逻辑
    return () => {
      if (pollTimerRef.current) {
        clearInterval(pollTimerRef.current);
      }
    };
  }, []); // 空依赖数组，保证仅在组件首次挂载时执行一次启动逻辑

  return (
    <div className="task-status">
      <p>任务1状态：{taskStatus.firstWork}</p>
      <p>任务2状态：{taskStatus.SecondWork}</p>
      <p>任务3状态：{taskStatus.ThirdWork}</p>
    </div>
  );
}

类组件实现说明 #

类组件逻辑完全对齐：在componentDidMount生命周期中启动定时器、按需执行首次接口调用；在componentWillUnmount生命周期中清除定时器；每次接口返回后做条件校验，满足全成功条件时调用clearInterval终止轮询即可。

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