加载失败后怎么重新请求数据？

Tr° 福萍提问于 2026-03-04 01:21:24 阅读 18

交互

我在用 Vue 做一个列表页，第一次加载失败了，用户点“重试”按钮时没反应，不知道是不是状态没更新对。

我试过在 retry 方法里重新调用 fetchList，但 loading 状态好像卡住了，界面还是显示错误状态。是不是哪里漏了 reset？

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

<script>
export default {
  data() {
    return { loading: true, error: false, list: [] }
  },
  async mounted() {
    await this.fetchList()
  },
  methods: {
    async fetchList() {
      try {
        this.list = await api.getList()
        this.error = false
      } catch (e) {
        this.error = true
      } finally {
        this.loading = false
      }
    },
    retry() {
      this.fetchList()
    }
  }
}
</script>

我来解答赞 7 收藏

反馈

1 条解答

夏侯浩宇 Lv1

你在重试时没重置状态，导致 loading 还是 false。在 fetchList 开头加上 this.loading = true 和 this.error = false 就行了。

async fetchList() {

  this.loading = true

  this.error = false

  try {

    this.list = await api.getList()

  } catch (e) {

    this.error = true

  } finally {

    this.loading = false

  }

}

2026-03-04 09:11