加载动画在数据返回后不消失怎么办？

FSD-沐言提问于 2026-03-05 09:59:19 阅读 5

优化

我用一个简单的 loading 动画来提升用户体验，数据请求前显示，请求完成后隐藏。但有时候数据明明回来了，loading 还是卡在页面上不消失，特别奇怪。

我试过在 then 里加 isLoading = false，也检查了异步逻辑，但偶尔还是会出问题。是不是哪里没处理好？

const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
  setIsLoading(true);
  fetchData().then(res => {
    setData(res);
    setIsLoading(false); // 这里有时候好像没生效？
  });
}, []);

我来解答赞 5 收藏

反馈

2 条解答

雨涵的笔记 Lv1

这问题我遇到过，八成是fetch请求中途出错了导致then里的代码没执行。性能上建议加个catch处理错误情况，不然loading会一直卡着。

给你改下代码，加个错误处理：

useEffect(() => {

  setIsLoading(true);

  fetchData()

    .then(res => {

      setData(res);

      setIsLoading(false);

    })

    .catch(error => {

      console.error('请求出错:', error);

      setIsLoading(false); // 出错也要关loading

    });

}, []);

另外有个更稳妥的写法是用finally，不管成功失败都会执行：

useEffect(() => {

  setIsLoading(true);

  fetchData()

    .then(res => {

      setData(res);

    })

    .catch(error => {

      console.error('请求出错:', error);

    })

    .finally(() => {

      setIsLoading(false); // 无论如何都会执行

    });

}, []);

这样写最保险，网络抽风或者接口报错都不会让loading卡住。我之前就因为没处理这个被测试提了好几个bug，都是泪...

2026-03-06 09:14

程序员春芹 Lv1

这种问题我碰到过，大概率是fetch请求出错导致then里的代码没执行。你现在的写法没处理catch情况，loading状态就卡住了。

简单粗暴的解决方案是加个finally保证loading消失：

useEffect(() => {

  setIsLoading(true);

  fetchData()

    .then(res => setData(res))

    .catch(err => console.error(err))

    .finally(() => setIsLoading(false)); // 不管成功失败都会执行

}, []);

另外建议把fetchData包一层try-catch，这样连网络错误都能处理。代码写起来可能像这样：

const fetchData = async () => {

  try {

    const res = await fetch(url);

    if (!res.ok) throw new Error(res.statusText);

    return await res.json();

  } catch (err) {

    console.error('请求炸了:', err);

    throw err; // 继续往上抛错误

  }

};

昨天我才帮同事解决过同样的问题，测试环境好好的线上就出bug，最后发现是API返回502时loading一直转。这种边界情况不处理很容易被测试提缺陷。

2026-03-05 10:07