加载失败时重试按钮没反应怎么办？

迷人的羽墨提问于 2026-02-12 11:46:35 阅读 13

交互

大家好，我在做一个图片加载组件时遇到了问题。当图片请求失败后，我按规范显示了错误提示和重试按钮，但点击重试按钮完全没反应，控制台也没有报错。

我用axios发起请求时这样写的：


this.axios.get('/api/image')
  .then(response => this.setData(response.data))
  .catch(error => {
    this.setState({ status: 'error' });
  });

重试按钮绑定的方法是这样的：


retryHandler() {
  this.setState({ status: 'loading' }, () => this.axios.get('/api/image'));
}

已经检查过网络请求确实能正常返回数据，状态切换逻辑也没问题。但点击重试按钮后loading状态没变，请求也没重新发起，感觉是哪里没绑定好？

加载失败加载状态

我来解答赞 3 收藏

反馈

2 条解答

Des.小青 Lv1

问题出在你的 retryHandler 方法里，this.axios.get 请求没有正确处理状态更新和错误逻辑。你只调用了请求，但没重新绑定 .then 和 .catch，所以即使请求成功或失败，组件的状态也不会更新。

复制这个代码试试：

retryHandler() {

  this.setState({ status: 'loading' }, () => {

    this.axios.get('/api/image')

      .then(response => {

        this.setData(response.data);

        this.setState({ status: 'success' });

      })

      .catch(error => {

        this.setState({ status: 'error' });

      });

  });

}

关键点是：setState 的回调函数里必须完整处理请求的逻辑，包括成功和失败的情况。你之前的代码只发起了请求，但没处理响应，导致状态卡在 loading。

另外吐槽一句，这种问题调试起来真是烦，建议以后在 catch 里加个 console.error(error)，至少能快速定位问题。复制这个改一下，应该就没问题了。

2026-02-19 21:15

百里仪凡 Lv1

你这个重试按钮没反应，问题出在 retryHandler 里。你调了 this.axios.get 但根本没有处理返回的 Promise，既没有 .then 也没有 await，请求发出去了但没人接，状态当然不会更新。

更关键的是，你 setState 的回调里直接扔了个 promise 进去，这不会触发任何数据更新逻辑。别走弯路，改法很简单：

retryHandler() {

  this.setState({ status: 'loading' }, () => {

    this.axios.get('/api/image')

      .then(response => this.setData(response.data))

      .catch(error => {

        this.setState({ status: 'error' });

      });

  });

}

把请求塞进 setState 的回调里，确保 loading 状态先更新，再重新发起请求，并且一定要接住 .then 和 .catch 来处理后续状态。不然你以为在重试，其实请求早就沉了。

2026-02-12 12:00