ELEMENT-UI的v-loading 早异步的时候不生效

Question

上面这个不行，页面都不会转圈(加载)，下面这个用同步就可以。
但是我方法不想加async 请问有什么方法吗

Answer 1

谢邀。
我刚看了你的截图，你第一个截图使用的是Promise.then，然后第二个截图使用的是asyn await,要搞清楚为什么第一个loading不生效，第二个生效，就要搞清楚这两者之间的区别。
不论是Promise还是async await，他们都是解决异步回调地狱的方法。说道异步，可能大家第一反应会想到setTimeout,现在我用setTimeout来代替这两者来说明两者的区别。

对于第一张图的Promise, 改成setTimeout就变成了这样

this.roleUserLoading = true
setTimeout(() =>{
  console.log('这里相当于Promise.then')
},1000)
this.roleUserLoading = false

对于第二张图的async await, 改成setTimeout就变成了这样

this.roleUserLoading = true
setTimeout(() =>{
  console.log('这里相当于await')
  this.roleUserLoading = false
},1000)

对比上面的代码，我们会发现this.roleUserLoading一个在setTimeout外面，一个在里面，在外面的因为setTimout是异步的，所以首先会执行

this.roleUserLoading = true
this.roleUserLoading = false

然后在1秒后才执行setTimeout的内容，而上面改变roleUserLoading的值是瞬间完成的，所以看不到loading

现在再说一下async await，await后面的代码都会等待await调用的异步执行完之后再执行，就相当于把await后面的所有代码都放到了setTimeout里面了，这时候loading就必须等待setTimeout被调用执行之后才会被关闭。你明白了吗？

那如何在promise上面也可以用loading呢，我们可以像下面代码这样

promise.then(() => {}).finally(() =>{
  this.roleUserLoading = false
})

如果觉得有用，麻烦给我一个赞，谢谢，同时也可以关注我的公众号【前端有的玩】，拉你进前端交流群，一起学习前端技术。

Answer 2

promise
.finally(() => {
  this.roleUserLoading = false;
});

这样试试