Vue.js - 推迟页面渲染直到数据请求完成

Question

我有一个页面显示使用 axios 从服务器获取的数据。

我想推迟页面渲染，直到 axios 请求完成。

原因是我有该页面的预渲染版本。因此，当 axios 请求仍在运行时，我想显示预渲染的数据而不是空白屏幕（以防止 CLS 问题）。

这就是我目前所拥有的：

export default {

  ....

  created() {
    this.fetchData().then((returnedData) => this.personData = returnedData);
  },

  data() {
    return {
      personData: {
        name: "",
      },
    };
  },

  methods: {
    async fetchData() {
      const response = await axios.get("api/persondata/");
      return await response.data;
    },
  },

  ...

}

所以基本上我想做的是使 axios 请求“同步”，或者以某种方式使函数create()等待，直到请求完成。

理想的情况是完全阻止渲染并仅显示预渲染的页面，以防 axios 请求失败。

关于如何做到这一点有什么想法吗？

Answer 1

您可以将其包装在 v-if 中等待其加载。使用 v-if 而不是 v-show 来防止尝试读取响应对象中尚不存在的值时出现错误。

<template>
  <div v-if="!isLoading">
    Show your updated data here
  </div>
  <div v-else>
    Show your prendered data here
  </div>
</template>

export default {

  data() {
    return {
      personData: {
        name: "",
      },
      isLoading: true
    };
  },

  methods: {
    async fetchData() {
      const response = await axios.get("api/persondata/");
      return await response.data;
    },
  },
  async mounted(){
     this.personData = await this.fetchData()
     this.isLoading = false
  }
}

包裹在 try/catch 中来处理错误。

在构建了一些非常大的 Vue 项目后，我发现与使用路由器相比，使用这种方法并结合渲染和格式化数据的组件效果最好。使用路由器挂钩对于小型应用程序来说很好，但如果您需要添加任何类型的页面访问工具或任何其他全局路由功能，那么它很快就会崩溃。

典型的模式是 View -> 读取 ID 参数 -> 传递给渲染数据的组件 -> 组件执行 axios 根据 ID 获取数据。如果路由参数发生变化（但路由不变），当参数发生变化时，您的组件仍然会更新。