async/await场景: 这是一个用同步的思维来解决异步问题的方案，当前端接口调用需要等到接口返回值以后渲染页面时。

async async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行，async 函数返回的是一个promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

await await的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后，才继续执行下面的代码。这正是同步的效果。

data() {
    return {
        topicList: []
    }
},
created() {
    this.getTopicList()
    console.log(this.topicList)
},
methods: {
    async getTopicList() {
      let resp = await axios.get(`/topic`)
      if (resp.data.status === 1) {
        this.topicList = resp.data.data.data
      }
    }
}

可以看到打印出来的是空数组。因为这时候调用接口返回的数据还没有被赋值。

修改如下，添加await：
data() {
    return {
        topicList: []
    }
},
async created() {
    await this.getTopicList()
    console.log(this.topicList)
},
methods: {
    async getTopicList() {
      let resp = await axios.get(`/topic`)
      if (resp.data.status === 1) {
        this.topicList = resp.data.data.data
      }
    }
}

刷新页面，可以看到打印出来的是已经被赋值的数组。

但是这种写法，不适合Nuxt3，在nuxt3下 是不能在created 前使用async的，会报错，提示nuxt实例不存在，但是可以在methods 方法前使用，比如：

<template>

<button @click="getTopicList">获取</button>

</template>


methods: {
    getTopicList() {
        await this.getData(); // 前面一定要加 await 否则下面的this.status 获取不到想要的数据
      //等待 this.status 有结果再执行其它操作
      if(this.status == 1){
      
      }
      
    },
    
    async getData(){
        let resp = await axios.get(`/topic`)
          if (resp.data.code === 0) {
            this.status = resp.data.data.status
          }
    }
}