1
liuidetmks 2021-11-08 17:01:13 +08:00
不是应该加一个 loading 状态吗
|
2
silk 2021-11-08 17:03:50 +08:00
???????????????????
多看书 多思考 |
3
M003 2021-11-08 17:05:47 +08:00 1
兄弟,你想法错了。
我是封装 axios 中请求前,将该请求丢到一个数组当中。然后开启 loading (开启前判断 loading 是否已经开启) 请求结束后,把该请求从数组中删除(删除后判断数组内是否有别的,如果没有就关闭 loading ) 这样可以保证只有一个 loading 在开启。 |
4
JKeita 2021-11-08 17:08:55 +08:00
添加拦截器?
|
5
shintendo 2021-11-08 17:12:22 +08:00
<div v-if="loading">转圈圈</div>
<div v-else>渲染数据</div> data: { loading: true, 数据: null }, created () { 发请求().then(返回 => { this.数据 = 返回 this.loading = false }) } |
6
elboble OP @shintendo 这个方法可以,但是如果这样的话,每个要读数据的页面几乎都要被 v-if ,v-else 包装下,vue 是不是可以给再包装下,给我们省点事,不知道有没有装饰器。
不过实话实说,虽然数据比 mount 来的晚,但是在页面上看不出,只是控制台上会提示渲染时某个变量 undefined ,可能网络只慢了一点点,数据回来后,马上重新渲染了,人感觉不出。 |
7
learnshare 2021-11-08 17:21:25 +08:00 1
关注数据(状态),而非其他任何东西
你的问题核心是渲染时访问了不存在的数据,这里出了错。 有两个解法: 1. 渲染备用内容,如上面介绍的 loading 组件。发起请求前设置 loading = true ;请求结束后设置 loading = false 。根据 loading 决定渲染什么。 2. 模板里检查数据是否可用。user && user.id |
8
learnshare 2021-11-08 17:24:46 +08:00
|
9
peterczg 2021-11-08 17:39:24 +08:00
楼主认为这是一个「问题」,意思是 Vue.js 框架本身有问题吗?是觉得 Vue.js 的每个 Hook 都设计成 async 模式吗?在生命周期函数里面进行异步操作,要等异步操作完成才能执行下一个钩子吗?
如果你想这么做,也不是不行,把 Vue.js 源码拷一份过来,把里面所有的 Hook 都改成 async 调用。然后书写的业务代码如下 ```js export default { async created(){ await axios('') }, mounted(){ }, } ``` 如果你没有理清同步与异步的关系,那暂且认定你是个写 Vue.js 的新手,因为不管是在 Vue.js created 钩子和 React 已经废弃的 componentWillMount 钩子里面,都是同步调用。 |
10
elboble OP @learnshare 自己学艺不精啊,都只教到在 created 和 mounted 里发 ajax 获数据,但是没教怎么处理异步函数返回是不确定的,v-if 加起来。
|
11
elboble OP @learnshare 是的,昨天第一次 webpack 打包,发现加了 elmentUI ,第一个页面有 4M 多,一个 js 3M ,这 4G 网络差一点都够呛,深切体会到移动互联网在 4G 上才能爆发。
后话,删了 elmentUI 先用 bootstrap 吧 |
12
elboble OP @peterczg 思维定式比较严重了,但是异步函数处理起来的确很头疼。写过一个 H5 页面里,几个消息要传递,还有回调,都是异步的,套了好几层。
异步函数有点像管杀不管埋,反正活干完了,后面怎么配合你自己想办法吧 |
14
simple233 2021-11-08 17:57:28 +08:00
如果是用 elementUI ,建议看看 loading 组件,并且自带 v-loading 指令。。
如果不是,自己写一个自定义指令(谷歌搜一下都有),用法:<div v-loading="loading" > </div> loading 为布尔值,true 为 loading 状态,false 显示原本页面。 |
15
douxc 2021-11-08 18:07:19 +08:00
1 、在 mounted 里发请求
2 、楼上任意一个回复都能实现 |
17
darknoll 2021-11-08 20:13:23 +08:00
这是异步的问题,你直接用 v-if 判断就行了
|
19
dfkjgklfdjg 2021-11-09 09:53:07 +08:00
呃....除了吐槽你《 mounted 前没返回》异步数据这个,
之外想和你说不喜欢 loading 的,你也可以试试看骨架屏..... |
21
gadfly3173 2021-11-09 10:29:57 +08:00
额。。。异步数据既然你能写成模板,说明你知道里面有哪些字段,你不想写 v-if 那就给 data 设个默认值呗。。。转圈圈就用 element 的 v-loading 或者找别的 loading 的解决方案就好了
|
22
elboble OP @gadfly3173 嗯嗯,是的,已经加了 v-if 处理了,只是觉得异步,回调这些方法难得控制。
|
23
gadfly3173 2021-11-09 12:38:17 +08:00
@elboble #22 这些逻辑当然是要你自己处理的,异步回调也是前端开发的基础内容了。现在有 async await 语法糖,写起来已经很轻松了
|
24
KouShuiYu 2021-12-07 16:15:19 +08:00
我是这样写的
v-loading="isLoading" 然后 this.isLoading = true; // 异步请求 this.isLoading = false; |