Vue 3中的异步操作管理示例分析

<script>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
export default {
  setup() {
    // 定义一个异步函数来处理所有需要执行的操作
    async function handleOperations() {
      try {
        // 创建一个 promise 数组，这里假设只有一个操作，所以只有一个 handleTest 调用
        const promises = [handleTest()];
        // 使用 Promise.all 来等待所有的操作完成
        const results = await Promise.all(promises);
        // 初始化一个标记变量，用来标识是否有错误发生
        let hasErrors = false;
        // 遍历所有的结果
        for (const result of results) {
          // 如果结果中包含错误码，并且错误码为 -1，则显示错误消息
          if (result && result.code === -1) {
            ElMessage({
              message: result.msg,
              type: "error",
            });
            // 标记有错误发生
            hasErrors = true;
            // 一旦发现错误就跳出循环
            break;
          }
        }
        // 如果没有错误发生，则显示成功消息
        if (!hasErrors) {
          ElMessage({
            message: "操作成功",
            type: "success",
          });
        }
      } catch (err) {
        // 如果在执行过程中有任何一个 promise 失败，catch 会被触发
        console.error('发生了一个错误:', err);
        // 显示一个默认的错误消息
        ElMessage({
          message: '操作失败',
          type: "error",
        });
      }
    }
    // 定义一个异步函数来处理单个操作
    async function handleTest() {
      try {
        // 执行具体的业务操作，这里假设 test 是一个返回 promise 的函数
        const response = await test(paramObj);
        // 返回处理后的数据
        return response.data;
      } catch (err) {
        // 如果请求失败，则记录错误信息
        console.error('请求失败:', err);
        // 抛出错误，以便在外部 catch 中被捕获
        throw err;
      }
    }
    // 开始执行所有操作
    handleOperations();
  },
};
</script>