vue3并发请求Promise.all和Promise.allSettled

在 Vue3 中，使用 Promise.all 处理并发请求可以高效地并行获取数据。以下是实现步骤和示例：

步骤说明

1. 生命周期钩子：在 onMounted 中触发请求，确保组件挂载后执行。

2. 响应式状态：使用 ref 或 reactive 管理数据、加载状态和错误信息。

3. 并发请求：通过 Promise.all 并行发送请求，优化加载时间。

4. 错误处理：统一处理错误，或使用 Promise.allSettled 单独处理每个请求的结果。

5. 请求取消：利用 AbortController 在组件卸载时取消未完成的请求，避免内存泄漏。

示例代码

vue

关键点解析

• 并发请求：Promise.all 并行执行请求，缩短等待时间。

• 状态管理：使用 ref 跟踪数据、加载状态和错误。

• 请求取消：通过 AbortController 在组件卸载时终止未完成的请求，避免更新已销毁组件的状态。

• 错误处理：区分请求取消错误和其他错误，确保用户体验。

使用 Promise.allSettled 的替代方案

• 使用 Promise.allSettled 替代 Promise.all，允许在部分请求失败时仍能获取成功的结果。
• 对每个请求的结果状态进行单独判断，确保即使某个请求失败，其他请求的结果仍能被正确处理。

javascript

const results = await Promise.allSettled([promise1, promise2]);
results.forEach((result) => {
  if (result.status === 'fulfilled') {
    // 处理成功结果
  } else {
    // 处理失败原因
  }
});

实例代码：Promise.all

// 加载固定选项
const initSelectOptions = async () => {
  try {
    // 加载受理组
    const acceptGroupResult = await acceptGroupOptionsService();
    if (!acceptGroupResult || !acceptGroupResult.data) {
      console.error("加载受理组别选项失败");
      return;
    }
    acceptGroupOptions.value = acceptGroupResult.data;

    // 如果是非查看模式，则加载其他选项
    if (props.operateCommandType !== "info-view") {
      // 并发加载多个选项
      const [wspjTypeResult, cyTypeResult, payTypeResult] = await Promise.all([
        selectOptionsService("lbWSPJType"),
        selectOptionsService("cyType"),
        selectOptionsService("lbFAX")
      ]);

      // 检查每个结果的有效性并赋值
      if (wspjTypeResult && wspjTypeResult.data) {
        wspjTypeOptions.value = wspjTypeResult.data;
      } else {
        console.error("加载评价类型选项失败");
      }

      if (cyTypeResult && cyTypeResult.data) {
        cyTypeOptions.value = cyTypeResult.data;
      } else {
        console.error("加载样品来源选项失败");
      }

      if (payTypeResult && payTypeResult.data) {
        payTypeOptions.value = payTypeResult.data;
      } else {
        console.error("加载缴费方式选项失败");
      }
    }
  } catch (error) {
    console.error("加载选项时发生错误:", error);
  }
};

实例代码：Promise.allSettled

// 加载固定选项
const initSelectOptions = async () => {
  try {
    // 加载受理组
    const acceptGroupResult = await acceptGroupOptionsService();
    if (!acceptGroupResult || !acceptGroupResult.data) {
      console.error("加载受理组别选项失败");
      return;
    }
    acceptGroupOptions.value = acceptGroupResult.data;

    // 如果是非查看模式，则加载其他选项
    if (props.operateCommandType !== "info-view") {
      // 并发加载多个选项
      const [wspjTypeResult, cyTypeResult, payTypeResult] = await Promise.allSettled([
        selectOptionsService("lbWSPJType"),
        selectOptionsService("cyType"),
        selectOptionsService("lbFAX")
      ]);

      // 检查每个结果的有效性并赋值
      if (wspjTypeResult.status === "fulfilled" && wspjTypeResult.value.data) {
        wspjTypeOptions.value = wspjTypeResult.value.data;
      } else {
        console.error("加载评价类型选项失败");
      }

      if (cyTypeResult.status === "fulfilled" && cyTypeResult.value.data) {
        cyTypeOptions.value = cyTypeResult.value.data;
      } else {
        console.error("加载样品来源选项失败");
      }

      if (payTypeResult.status === "fulfilled" && payTypeResult.value.data) {
        payTypeOptions.value = payTypeResult.value.data;
      } else {
        console.error("加载缴费方式选项失败");
      }
    }
  } catch (error) {
    console.error("加载选项时发生错误:", error);
  }
};

总结

在 Vue3 中结合 Promise.all 和响应式系统，能有效管理并发请求及状态，提升应用性能和用户体验。注意处理加载状态、错误及资源清理，以确保代码健壮性。