async和await在生命周期中为什么没起作用?

fwer
  • 349

我想等created结束再执行mounted 所以用了async和await 但是发现这样好像没有起作用 这是为什么?

created () {
    this.test()
},
mounted () {
    console.log(2)
},
methods: {
    test2 () {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(1)
          resolve()
        }, 200)
      })
    },
    async test () {
      await this.test2()
    }
}
回复
阅读 4.8k
3 个回答

按照我的理解,asyn函数的外部调用asyn函数的时候,不会被其内部的await阻塞,也就是说created方法不会因为test内部的await而等待,created早就执行完了,test内部还在await没有返回,created应该用then去接收test的返回值undefined。

你应该是想用await来阻塞javascript执行,其实这是行不通的,await其实不会阻塞任何(非asyn)方法执行,本质上await也不能阻塞asyn函数的执行。created不是asyn函数,不可能等待或者阻塞。

mounted 本来就是在 created 结束之后执行的。

async 函数不会中断 JavaScript 的执行,而是将 await 的函数放入任务队列中。

mountedconsole.log(2) 是同步的,会先被执行(具体需要了解任务队列和 Vue 生命周期)

如果你要确保 console.log(2) 要在之后执行,建议你在 mountedcreated 中用 this.test().then(() => console.log(2))

ks_zhangyi
  • 2
新手上路,请多包涵

说得粗鲁些就是生命周期钩子里的触发的这些函数是“管生不管养”的。他只管在那个时间点上发送请求、执行函数……但是至于返回的结果他是不要求收到的。

你知道吗?

宣传栏