加载失败时怎么优雅地显示错误提示？

博主丽萍提问于 2026-03-14 01:46:22 阅读 13

交互

我在做列表页的加载逻辑，网络请求失败后想显示“加载失败，请重试”的提示，但现在的写法好像没生效，状态切换也不对。

我试过在 catch 里改 loading 和 error 状态，但页面还是卡在 loading 动画上，不知道是不是状态更新没触发重新渲染？

<div v-if="loading">加载中...</div>
<div v-else-if="error">加载失败，请重试</div>
<ul v-else>
  <li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>

我来解答赞 8 收藏

反馈

1 条解答

设计师雯婷 Lv1

问题很可能是你在 catch 块里状态更新了但没触发 Vue 的响应式更新，或者 this 指向不对。

常见坑：用了箭头函数导致 this 指向错误，或者 loading/error 没在 data 里初始化。

直接上正确写法：

export default {

  data() {

    return {

      loading: true,

      error: false,

      list: []

    }

  },

  methods: {

    async fetchList() {

      this.loading = true

      this.error = false

      

      try {

        const res = await fetch('/api/list')

        this.list = await res.json()

      } catch (e) {

        this.error = true  // 这里改成 true，不是 false

      } finally {

        this.loading = false  // 用 finally 确保 loading 一定会被重置

      }

    }

  },

  mounted() {

    this.fetchList()

  }

}

关键点：

用 finally 而不是只在 catch 里改 loading。万一 try 成功了但 res.json() 失败，loading 就永远是 true。finally 能保证无论成功还是失败都会关掉 loading 状态。

另外检查下你的模板，loading/error 的初始值有没有在 data 里声明好。Vue 2 如果没声明直接用是不会响应式的。

如果你是 Vue 3，逻辑一样，只是 composition API 里用 ref：

const loading = ref(true)

const error = ref(false)

const list = ref([])



try {

  loading.value = true

  error.value = false

  const res = await fetch('/api/list')

  list.value = await res.json()

} catch {

  error.value = true

} finally {

  loading.value = false

}

对了，模板里别忘了加 v-show 或者确保 error 状态能正常显示。你的 v-if/v-else-if/v-else 逻辑是对的，检查下是不是 error 变量名拼错了或者没对上。

2026-03-14 02:00