当前位置:   article > 正文

Ajax请求中async导致element组件添加loading失败_element ui中如何使多个异步请求执行完然后loading为false

element ui中如何使多个异步请求执行完然后loading为false

element组件添加加载loading状态,我想只要是程序员都应该知道,不知道的可以看element组件官网http://element-cn.eleme.io/#/zh-CN/component/installation

我这边主要介绍async的作用以及为什么element添加加载loading状态会失败。(因为这个添加loading这个简单的任务我做了整整一天,最后发现与Ajax请求的async有关)

首先,loading加载必然是在表中定义(整个页面加载,可以观看element官网)

然后将loading在data中定义:

 

最后是向后台请求获取数据:

这时你会发现,你的loading明明加上去了,但页面加载数据的时候loading还是不显示加载状态,所以我查了会,原来是Ajax请求中async在作祟,下来我简单简述一下axync的作用:

  1. async.
  2. 默认是 true,即为异步方式,$.ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,
  3. 触发$.ajax里的success方法,这时候执行的是两个线程。
  4.   async 设置为 false,则所有的请求均为同步请求,在没有返回值之前,同步请求将锁住浏览器,用户
  5. 它操作必须等待请求完成才可以执行。
  6. 如果async设置为:true,异步操作,则不会等待ajax请求返回的结果,会直接执行ajax后面的语句。
  7. 如果async设置为:false, 同步操作,在没有返回值之前,alert(temp)是不会执行的。

解决方案:其实很简单,只要将 async: false,删除就ok了!

最后你会发现页面加载数据时会有加载状态。(刚练习写博客,不喜勿喷)!

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

闽ICP备14008679号