当前位置:   article > 正文

VUE卖座网项目中数据获取的等待页面处理_vue查询的时候等待

vue查询的时候等待

1.需求

在数据请求的过程中,我们可能需要等待数秒,我们可以制作一个简单的加载页面,这个动画的制作在这里就不多介绍了,我们主要来分析一下关于这个动画的显示和隐藏问题。
在这里插入图片描述
在这里插入图片描述

2.问题分析

首先显示肯定是在页面请求之前来完成,然后消失的话是在我们的数据请求完毕之后才可以消失的。
在这里就有几个新的问题
1.我们数据请求的结果分析
2.如何去完成数据的传值
3.数组如何对完成对视图的控制

3.问题解决

1.对于第一个问题,我们在axios数据请求中,本身就是要返回并调用then()方法的。我们在这里同样的在then()方法执行前,去完成动画的显示,在调用之后我们来关闭动画
2.数据的获取对我们来说是最重要的,我们要在vue中完成这个功能肯定离不开数据的传值。
首先我们可以现在vuex中去定义一个值,来作为我们判断显示隐藏的根本条件。
在这里插入图片描述
在这里我们给一个值,并在项目的父组件中来决定这个动画子组件的显示和隐藏。
在这里插入图片描述
在mutations中定义好我们的方法,之后调用,方法很简单,只需要改变一下isShow的值即可

在这里插入图片描述
组件的引入在这里就不多解释了,也比较简单。
在完成这一步的时候,动画页面已经隐藏掉了,因为我们的值为false。

我们先拿第一个正在热映页面来解释
我们在调用http方法的时候可以给这个方法一个this,这个this指向我们整个页面vue实例,
在这里插入图片描述
在axios中需要用到这个this
在这里插入图片描述

在这里插入图片描述
这里也是我们整个功能的核心,首先我们在上面的getNowPlayingData中传入一个参数vm,我们只需要在这个函数中完成axios的配置信息,然后回到我们的_get()中来看,我们在这个函数中可以直接调用vuex的参数信息。
这个因为后续我们还有在子组件中调用方法,所以直接返回一个Promise在后续我们可以继续调用。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/675386
推荐阅读
相关标签
  

闽ICP备14008679号