vue中封装async函数

在Vue中，我们可以将异步操作封装在一个方法中，然后在需要的地方进行调用。以下是一个简单的示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="getData">获取数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    async fetchData() {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const data = await response.json();
      return data.title;
    },
    async getData() {
      try {
        this.message = await this.fetchData();
      } catch (error) {
        console.error(error);
      }
    }
  }
}
</script>

在上述示例中，我们将异步获取数据的操作封装在了fetchData方法中，并使用async和await关键字等待异步操作的完成。然后，在getData方法中调用fetchData方法，并捕获错误以便进行处理。

Vue中封装异步操作可以提高代码的可读性和维护性，也更易于进行错误处理和调试。