vue3 promise数据处理

在Vue 3中，可以使用Promise来处理数据。以下是一个简单的示例，展示了如何在Vue 3中使用Promise进行数据处理：

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="isLoading">Loading...</div>
    <div v-else>
      <div v-if="error">{{ error }}</div>
      <ul v-else>
        <li v-for="item in data" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      error: null,
      data: null,
    };
  },
  methods: {
    fetchData() {
      this.isLoading = true;
      this.error = null;
      this.data = null;

      // 使用Promise进行数据获取
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
          // 获取数据成功
          this.isLoading = false;
          this.data = data;
        })
        .catch(error => {
          // 获取数据失败
          this.isLoading = false;
          this.error = error.message;
        });
    },
  },
};
</script>

在这个示例中，我们使用了一个按钮来触发`fetchData`方法，该方法使用了`fetch`函数来获取数据。我们通过设置`isLoading`来显示加载状态，通过设置`error`来显示错误信息，通过设置`data`来保存获取到的数据。

使用Promise可以让我们更好地处理异步操作，确保在数据获取完成之前不会渲染错误的或不完整的数据。请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行适当的修改。