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() function 等到请求完成。

一个理想的方案是阻止一起渲染并只显示预渲染的页面，以防 axios 请求失败。

关于如何做到这一点的任何想法？

Answer 1

您可以包装在等待加载的 v-if 中。 v-if 而不是 v-show 以防止错误尝试读取响应 object 中尚不存在的值。

<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 项目之后，我发现使用这种方法，结合渲染和格式化数据的组件，与使用路由器相比效果最好。 使用路由器挂钩对于小型应用程序来说很好，但如果您需要添加任何类型的页面访问工具或任何其他全局路由功能，它很快就会崩溃。

一个典型的模式是查看 -> 读取 ID 参数 -> 传递给呈现数据的组件 -> 组件执行 axios 以基于 ID 获取数据。 如果路由参数更改（但路由没有），您的组件在参数更改时仍会更新。