vue钩子函数中使用async、await 注意点

自己在开发中总会遇到很多问题,很多时候不记录就会忘记了,所以我打算记录下来伴随自己成长,如果有幸能帮到小伙伴那更美哉

在vue中我们经常会有这种需求:

async created() {
    // 需要等到上个代码执行完拿到值再做其他操作
    await this.userData(); //这里可以拿到userType
    //拿到userType 判断用户不是代理人展示不同信息
    if(this.userType==1){
      this.isAgent=true;
    }
}

先说注意点:

1. 钩子函数只会在指定时间执行(Vue生命周期),使用延时器等是不会影响周期执行的
2. 钩子函数里使用async,await, 后面只能跟promise,否则加async,awiat没有意义
3. 我们常用的钩子函数 created、mounted 如果加了async,await,想要同步执行代码,代码必须放在同一个钩子函数里面

• 钩子函数只会在指定时间执行(Vue生命周期),使用延时器等是不会影响周期执行的

async created() {
    await setTimeout(() => {
      console.log(1);
    }, 100);
    console.log(2);
  },
async mounted() {
  await setTimeout(() => {
      console.log(3);
    }, 100);
    console.log(4);
}
// 输出结果: 2 4 1 3
// 结论: 所以await 加给setTimeout是没有生效的,延时器并没有影响生命周期执行

• 钩子函数里使用async,await, 后面只能跟promise,否则加async,awiat没有意义

// 根据上面代码看出, await 后面加延时器等其他类似需要延迟执行的函数是没用的
// 然而await 后面加同步代码又多此一举
// 而其实async,awiat是专门为了解决promise回调函数多层嵌套的问题
async created() {
    await this.userData(); // 这个函数负责发请求获取数据,axios就是使用了promise
    //拿到userType 判断用户不是代理人展示不同信息
    if(this.userType==1){
      this.isAgent=true;
    }
}
// 结论: 这样写该周期函数下面的代码是会等待请求回来再执行的这样写是没问题的! 但仅仅限该周期函数!

• 我们常用的钩子函数 created、mounted 如果加了async,await,想要同步执行代码,代码必须放在同一个钩子函数里面

data() {
  return {
    name: ''
  }
},
async created() {
// this.userInfo() 发送请求获取数据,然后赋值给this.name ---- this.name = res.data.name
  await this.userInfo()
  ...
},
mounted() {
  console.log(this.name) // 打印为''
}

// 结论: 不要以为mounted就一定比created后执行, 因为created加了async,await
// mounted函数懒得等他伺候promise 就先执行了
// 所以你在mounted里面不一定能拿到this.name进行赋值! 所以像这种有依赖上一个代码结果的最好写在一堆

async created() {
// this.userInfo() 发送请求获取数据,然后赋值给this.name ---- this.name = res.data.name
  await this.userInfo() // 拿到数据赋值成功
  console.log(this.name) // 打印成功
},

结尾:

我想我记录都是些不太高深的问题,但是高深的我也不会哈哈哈~