vue初始化请求所有的接口之后展示页面

954 阅读1分钟

前提:

vue加载页面,首先加载的是public下的入口文件index.html。页面中有个跟标签app,骨架屏需放在这个里面,vue实例化之后vue组件的视图就会放入这个标签中,替换原有的节点。

需求:

现在我们的需求是页面渲染完成之后先不要展示,需要请求完首页的所有有关展示的接口之后,消除骨架屏;

试用方法:

我们想在beforeCreate中使用asncy....await进行请求,发现这个方法是没有办法实现的,vue的周期函数都是异步的;

解决:

然后我们将骨架屏写在了另一个节点中,将组件内的节点进行隐藏;

这样就可以在页面展示之前展示的一直是骨架屏;

接着我们就可以在初始化的时候设置一个index(接口请求的次数),请求接口的时候让他增加,然后封装一个公共的方法,在每次请求完接口之后调用这个方法(接口是异步的,所以需要所有的接口都调用);

封装的方法入下:(5是首页展示的地方需要请求5个接口)

所有的接口请求完之后,这样就可以将骨架屏隐藏掉,展示数据请求之后渲染的页面(有可能骨架屏节点获取不到的时候,不能让咱们的页面报错,所以需要进行个判断);