面试题：Vue Composition API下复杂异步逻辑之并发请求处理

Question

在Vue项目里，你需要同时发起多个异步请求（比如获取用户信息、用户订单列表、用户收藏商品列表），使用Vue Composition API 如何优雅地处理这些并发请求，确保在所有请求都完成后再进行相关的UI更新，并且在某个请求失败时能正确处理错误。请给出具体实现思路和核心代码。

Answer 1

实现思路

1. 使用 Promise.all 来并发执行多个异步请求。Promise.all 接收一个 Promise 数组，当所有 Promise 都 resolved 时，返回一个包含所有 resolved 值的新 Promise；只要有一个 Promise 被 rejected，整个 Promise.all 就会被 rejected。
2. 在 Vue Composition API 的 setup 函数中发起这些异步请求。
3. 使用 ref 来定义数据状态，用于存储请求结果和错误信息。
4. 利用 onMounted 生命周期钩子在组件挂载后发起请求。

核心代码

<template>
  <div>
    <div v-if="error">请求出错: {{ error.message }}</div>
    <div v-if="userInfo">用户信息: {{ userInfo }}</div>
    <div v-if="orderList">用户订单列表: {{ orderList }}</div>
    <div v-if="favoriteGoodsList">用户收藏商品列表: {{ favoriteGoodsList }}</div>
  </div>
</template>

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

// 模拟异步请求函数
const getUserInfo = () => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve({ name: '张三', age: 25 });
  }, 1000);
});

const getOrderList = () => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve([{ orderId: 1, amount: 100 }, { orderId: 2, amount: 200 }]);
  }, 1500);
});

const getFavoriteGoodsList = () => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(['商品1', '商品2']);
  }, 2000);
});

const userInfo = ref(null);
const orderList = ref(null);
const favoriteGoodsList = ref(null);
const error = ref(null);

onMounted(() => {
  Promise.all([getUserInfo(), getOrderList(), getFavoriteGoodsList()])
  .then(([userInfoRes, orderListRes, favoriteGoodsListRes]) => {
      userInfo.value = userInfoRes;
      orderList.value = orderListRes;
      favoriteGoodsList.value = favoriteGoodsListRes;
    })
  .catch((err) => {
      error.value = err;
    });
});
</script>