停止加载 Vue 页面，直到加载数据（获取）

Posted 2023-03-13

【中文标题】停止加载 Vue 页面，直到加载数据（获取）

【英文标题】：Stop Vue page from loading till data (fetch) is loaded

【发布时间】：2021-11-07 22:13:26

【问题描述】：

我试图弄清楚如何在我的获取任务完成之前阻止我的页面加载。这是因为我遇到了一些问题：

我不能重复使用相同的数据，所以我必须每次都重新获取它。 （加载后更改视图有效，但重新加载路线会中断） 锚链接不起作用，如果我在某些特色项目下方有锚链接#about，则#about 部分将被移到下方，因为特色项目刚刚完成加载。我不能真正使用骨架加载系统，因为项目的数量是动态的。

这是我正在使用的当前代码：

  data() 
    return 
      collections: [],
      items: []
    
  ,
  methods: 
    async fetchCollections() 
      const res = await fetch('http://localhost:4000/collections')
      return await res.json()
    ,
    async fetchItems() 
      const res = await fetch('http://localhost:4000/items')
      return await res.json()
    
  ,
  async created() 
    this.collections = await this.fetchCollections()
    this.items = await this.fetchItems()
  

总而言之，我知道这可能是完全错误的做法，而且我做错了一切。请不要让我感到羞耻，我是 Vue 新手，对 javascript 还是有点粗糙。

总结

预期的行为是页面在从后端提取数据后完成加载。

当前行为意味着我的网站将加载，然后在延迟一毫秒后，内容将从完成的提取中弹出。

【参考方案1】：

如果你的路由依赖于某些要获取的数据，那么正确的做法是通过 Vue-router 的 Navigation 守卫。 Here's docs关于这个问题。 这是您的用例的一些代码：

async function fetchData() 
  const resCol = await fetch('http://localhost:4000/collections');
  const resColJson = await resCol.json();
  const resItems = await fetch('http://localhost:4000/items');
  const resItemsJson = await resItems.json();
  return  resColJson, resItemsJson ;

export default 
  data() 
    return 
      collections: [],
      items: []
    
  ,
  beforeRouteEnter(to, from, next) 
    fetchData().then(( resColJson, resItemsJson  ) => 
      next((vm) => 
        vm.collections = resColJson;
        vm.items = resItemsJson;
      );
    );
  ,
  beforeRouteUpdate() 
    fetchData().then(( resColJson, resItemsJson  ) => 
      this.collections = resColJson;
      this.items = resItemsJson;
    );
  ,

【讨论】：

谢谢你。我不知何故没有意识到可以在组件中使用导航防护。我想我得学会更好地阅读。

没关系，这个解决方案是返回承诺而不是实际的 json 内容。通过第二个.then，我能够在初始加载时获取数据，但是视图不会呈现，并且在重新加载页面时也不会获取数据。

抱歉，我在一个守卫中接到了两个下一个电话。检查更新的代码。

感谢您的快速回复，但我的问题是集合应该接收一个数组，但 res.json() 正在返回一个承诺，其中嵌套了必要的数组[Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, got Promise

我明白了，又修好了。如果我将代码抽象成一个单独的异步函数，似乎我可以更好地重写它。