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

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

阅读 515
评论
    2 个回答
    • 994

    谢邀。
    我刚看了你的截图,你第一个截图使用的是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 awaitawait后面的代码都会等待await调用的异步执行完之后再执行,就相当于把await后面的所有代码都放到了setTimeout里面了,这时候loading就必须等待setTimeout被调用执行之后才会被关闭。你明白了吗?

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

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

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

      相似问题
      推荐文章