加载动画在请求完成前就消失了怎么办？

玉涵 ☘︎ 提问于 2026-03-24 23:02:21 阅读 10

交互

我用 axios 发起请求时加了个 loading 动画，但有时候数据还没回来，loading 就提前隐藏了，特别奇怪。

我是这样控制 loading 状态的：this.loading = true，然后在 finally 里设成 false。但偶尔会闪一下就没了，是不是异步顺序出问题了？

getData() {
  this.loading = true;
  axios.get('/api/data')
    .then(res => { this.list = res.data; })
    .catch(err => { console.error(err); })
    .finally(() => { this.loading = false; });
}

我来解答赞 0 收藏

反馈

1 条解答

IT人统宇 Lv1

嗯，这个问题听起来挺常见的，有时候确实会遇到 loading 动画提前消失的情况。我们一步步来排查一下可能的原因，并找到解决办法。

首先，你目前的代码逻辑看起来没问题，就是在请求开始时设置 this.loading 为 true，然后在请求完成后（无论是成功还是失败）都把 this.loading 设置为 false。所以从逻辑上来说，loading 应该会在请求结束后才会消失。

但是你说有时候会提前消失，可能是由于以下几个原因导致的：

1. 请求被取消或中断：虽然这种情况比较少见，但如果在请求过程中发生了错误或者请求被取消，可能会导致 finally 块中的代码没有被执行。

2. 多个请求并发问题：如果你的页面上有多个请求同时进行，可能会出现一个请求的 finally 块过早地将 this.loading 设置为 false，而其他请求还在进行中。

3. 异步操作导致的状态不一致：有时候 JavaScript 的异步特性可能会导致一些难以预料的行为，尤其是当涉及到状态管理的时候。

为了确保 loading 动画不会在请求完成之前消失，我们可以采取以下措施：

1. 确保每个请求都有对应的 loading 管理：对于每个请求，都应该有自己的 loading 状态管理，而不是全局的一个 loading 状态。这样可以避免多个请求并发时的状态冲突。

2. 增加计数器来跟踪请求的数量：我们可以使用一个计数器来记录当前正在进行的请求数量。每次发起请求时计数器加一，每次请求结束时计数器减一。只有当计数器为零时，才将 loading 设置为 false。

接下来，我们来实现这个计数器的方法：

// 初始化请求计数器

let requestCounter = 0;



function getData() {

  // 每次发起请求前，增加计数器

  requestCounter++;

  this.loading = requestCounter > 0;



  axios.get('/api/data')

    .then(res => {

      this.list = res.data;

    })

    .catch(err => {

      console.error(err);

    })

    .finally(() => {

      // 请求完成后，减少计数器

      requestCounter--;

      // 只有当没有正在进行的请求时，才隐藏 loading

      this.loading = requestCounter > 0;

    });

}

这里需要注意的是，我们在每次发起请求时都检查 requestCounter 的值来决定是否显示 loading。同样，在请求结束时，我们也会检查计数器的值来决定是否隐藏 loading。这样可以确保即使有多个请求同时进行，loading 动画也能正确地显示和隐藏。

希望这能解决你遇到的问题。如果还有其他问题，随时可以问我。

2026-03-24 23:05