如何在React useEffect钩子中实现API请求n秒超时提示

你可以通过定时器+状态管理来实现超时提示功能，核心思路是：发起请求时启动一个定时器，n秒后触发提示；如果请求完成（成功/失败），立刻清除定时器避免无效提示；同时在组件更新或卸载时清理定时器，防止内存泄漏。

修改后的完整代码 #

import { useState, useEffect } from 'react';

function YourComponent({ sid }) {
  const [isLoading, setIsLoading] = useState(false);
  const [result, setResult] = useState(null);
  // 新增状态控制超时提示的显示
  const [showTimeoutWarning, setShowTimeoutWarning] = useState(false);
  // 自定义超时时间，比如5秒
  const TIMEOUT_SECONDS = 5;

  useEffect(() => {
    let timeoutId;

    const fetchData = async () => {
      setIsLoading(true);
      setShowTimeoutWarning(false); // 每次发起请求时重置提示状态
      // 启动超时定时器
      timeoutId = setTimeout(() => {
        setShowTimeoutWarning(true);
      }, TIMEOUT_SECONDS * 1000);

      try {
        const res = await fetch("/api/r/" + sid);
        const result = await res.json();
        setResult(result);
      } catch (err) {
        console.error(err);
      } finally {
        // 请求完成（成功/失败）后清除定时器
        clearTimeout(timeoutId);
        setIsLoading(false);
      }
    };

    fetchData();

    // 清理函数：组件卸载或sid变化时，清除未完成的定时器
    return () => {
      clearTimeout(timeoutId);
      // 可选：如果需要中断未完成的请求，可添加AbortController逻辑
      // controller?.abort();
    };
  }, [sid]);

  return (
    <div>
      {isLoading && <div>加载中...</div>}
      {/* 超时提示区域，可自定义样式 */}
      {showTimeoutWarning && <div style={{color: '#ff9800'}}>数据加载较慢，请稍候片刻...</div>}
      {/* 渲染接口返回数据 */}
      {result && <div>{/* 你的数据展示逻辑 */}</div>}
    </div>
  );
}

关键说明 #

• 定时器生命周期：用let timeoutId保存定时器ID，在请求完成的finally块中清除，确保只要请求结束就不会触发超时提示。
• 状态重置：每次发起新请求时重置showTimeoutWarning，避免旧提示干扰新请求流程。
• 内存泄漏防护：useEffect的返回函数会在组件卸载或sid变化时执行，清除未完成的定时器，防止无效的状态更新。
• 可扩展优化：如果需要中断未完成的请求，可以结合AbortController实现，进一步优化资源占用。

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