vue3 Promise处理异步操作的对象

Promise 是 JavaScript 中用于处理异步操作的一种对象。它代表了一个异步操作的最终完成（或失败）及其结果值。在处理异步操作时，Promise 提供了一种更干净、更可读的方式来管理回调函数。

Promise 的状态

一个 Promise 对象有三种状态：

1. Pending（进行中）：初始状态，操作尚未完成。
2. Fulfilled（已成功）：操作成功完成，并返回一个结果值。
3. Rejected（已失败）：操作失败，并返回一个原因（错误）。

使用 Promise 的示例

下面是一个创建并使用 Promise 的简单示例：

// 创建一个 Promise
const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const success = true; // 模拟异步操作结果
    if (success) {
      resolve('操作成功'); // 操作成功，调用 resolve
    } else {
      reject('操作失败'); // 操作失败，调用 reject
    }
  }, 2000);
});

// 使用 Promise
myPromise
  .then(result => {
    console.log(result); // 操作成功时输出：操作成功
  })
  .catch(error => {
    console.error(error); // 操作失败时输出：操作失败
  })
  .finally(() => {
    console.log('操作完成'); // 无论成功还是失败，都会执行
  });

在 Vue 3 组件中使用 Promise

以下是一个在 Vue 3 组件中使用 Promise 的示例，展示了如何处理异步数据获取：

<template>
  <div>
    <p v-if="loading">加载中...</p>
    <p v-else-if="error">{{ error }}</p>
    <ul v-else>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const items = ref([]);
    const loading = ref(true);
    const error = ref(null);

    const fetchItems = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // 模拟异步操作
          const success = true; // 模拟操作结果
          if (success) {
            resolve([
              { id: 1, name: 'Item 1' },
              { id: 2, name: 'Item 2' },
            ]); // 操作成功，返回数据
          } else {
            reject('数据获取失败'); // 操作失败，返回错误信息
          }
        }, 2000);
      });
    };

    onMounted(() => {
      fetchItems()
        .then(data => {
          items.value = data; // 成功获取数据
        })
        .catch(err => {
          error.value = err; // 捕获并设置错误信息
        })
        .finally(() => {
          loading.value = false; // 操作完成，更新加载状态
        });
    });

    return {
      items,
      loading,
      error,
    };
  },
};
</script>

<style>
/* 在这里添加你的样式 */
</style>

解释

1. 响应式数据:

   • items、loading 和 error 是通过 ref 创建的响应式引用。items 存储获取的数据，loading 表示加载状态，error 存储可能的错误信息。

2. fetchItems 函数:

   • fetchItems 函数返回一个新的 Promise，模拟一个异步数据获取操作。根据 success 变量的值，调用 resolve 返回数据或调用 reject 返回错误信息。

3. 使用 Promise:

   • 在组件挂载时，通过 onMounted 钩子调用 fetchItems 函数。
   • 使用 then 处理成功结果，将数据赋值给 items。
   • 使用 catch 处理错误，将错误信息赋值给 error。
   • 使用 finally 确保在操作完成后，无论成功还是失败，都将 loading 设置为 false。

这种方式清晰地展示了如何在 Vue 3 组件中使用 Promise 来处理异步操作，并在视图中反映这些操作的状态。