Vue加载失败后重试按钮点击不更新状态怎么办？

南宫瑞珺提问于 2026-02-03 23:22:34 阅读 46

交互

我在用Vue做图片加载功能时，遇到加载失败后重试按钮能显示但点击没反应的问题。代码逻辑是失败时显示重试按钮，点击后重置状态重新加载，但实际点击按钮后loading状态始终没变化：


<template>
  <div>
    <img v-if="loaded" :src="imageUrl" @error="handleError">
    <button v-if="error" @click="retry">重试</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loaded: false,
      error: false
    }
  },
  methods: {
    async loadImage() {
      try {
        // 模拟异步请求
        const res = await fetch('invalid-url');
        this.loaded = true;
      } catch (err) {
        this.error = true;
      }
    },
    retry() {
      this.error = false;
      this.loadImage(); // 重新加载时状态没变化
    }
  }
}
</script>

我已经检查过网络请求确实失败了，error变量能正确设置，但点击重试按钮后loadImage方法执行时loading状态还是不更新。是不是响应式系统没检测到某些变化？或者v-if的条件判断有问题？

我来解答赞 5 收藏

反馈

2 条解答

正汉的笔记 Lv1

问题出在 fetch 请求的错误处理逻辑上。你当前的 loadImage 方法中，try/catch 只会捕获到网络层面的错误（比如请求地址无效），但如果你的请求地址是有效的，只是返回了错误的状态码（比如 404、500），这时 fetch 不会抛出异常，而是把控制权交给 then，只有在请求本身失败（比如网络断开、跨域拦截）时才会触发 catch。

所以即使你调用了 retry()，重新执行 loadImage()，但由于 fetch 没有抛出错误，loaded 始终没有被设为 false，也不会再次变成 loading 状态。

另外，你的代码中没有将 loaded 重置为 false，这也是状态没变化的原因之一。

### 解决方案

1. **在请求前始终重置初始状态**
2. **手动检查响应状态码**
3. **在适当的时候抛出错误，让 catch 捕获到**

下面是修改后的代码示例：

async loadImage() {

  this.loaded = false; // 重置加载状态

  this.error = false;



  try {

    const res = await fetch('invalid-url');



    if (!res.ok) {

      throw new Error('请求失败: ' + res.status);

    }



    // 请求成功后才设为 loaded

    this.loaded = true;

  } catch (err) {

    this.error = true;

  }

}

这样点击重试按钮时，loaded 会被设为 false，按钮才会再次显示 loading 效果。同时手动判断响应是否成功，才能保证错误状态被正确捕获。

### 补充说明

官方文档里说，Vue 的响应式系统可以自动追踪 data 中的依赖变化，前提是你确实访问并修改了这些变量。你原来的代码没有重置 loaded，所以组件没有感知到状态变化。

确保每次加载前都清空状态，才能保证 UI 同步更新。

2026-02-04 08:09

Top丶静怡 Lv1

你这情况应该是异步加载时没有正确重置 loaded 状态，导致 v-if 条件没触发更新。
试试在 retry 方法里把 loaded 也一并重置：

retry() {

  this.loaded = false;

  this.error = false;

  this.loadImage();

}

2026-02-04 00:10