vue中 async 和 await的用法和作用

async 和 await 是 ES7 中新增的语法，用于简化 Promise 的使用。async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数，也可以使用 await 等待 Promise 对象的处理结果。

在 Vue 中，async 和 await 可以用于异步操作，例如在组件中使用 async 和 await 来等待数据的获取，避免了回调函数的嵌套和代码的可读性更好。

下面是一个使用 async 和 await 的例子：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  async created() {
    this.message = await this.fetchData()
  },
  methods: {
    fetchData() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve('Hello, World!')
        }, 1000)
      })
    }
  }
}
</script>

在上面的例子中，我们使用 async 和 await 来等待 fetchData 方法的执行结果，并将结果赋值给 message 属性。