Vue 3 异步请求控制：串行与并行的优雅实践

// composables/useUserFlow.js
import { ref } from 'vue'

export function useUserFlow() {
  const userData = ref(null)
  const ordersData = ref(null)
  const statsData = ref(null)
  const loading = ref(false)
  const error = ref(null)

  const handleUserFlow = async () => {
    loading.value = true
    error.value = null
    try {
      // 1. 等待第一个请求完成
      const userResponse = await fetch('/api/user')
      if (!userResponse.ok) throw new Error('获取用户失败')
      userData.value = await userResponse.json()
      console.log('1. 用户数据获取成功:', userData.value)

      // 2. 使用上一步的结果作为参数，等待第二个请求完成
      const ordersResponse = await fetch(`/api/orders?userId=${userData.value.id}`)
      if (!ordersResponse.ok) throw new Error('获取订单失败')
      ordersData.value = await ordersResponse.json()
      console.log('2. 订单数据获取成功:', ordersData.value)

      // 3. 等待第三个请求完成
      const statsResponse = await fetch('/api/stats')
      if (!statsResponse.ok) throw new Error('获取统计失败')
      statsData.value = await statsResponse.json()
      console.log('3. 统计数据获取成功:', statsData.value)

      // 4. 所有请求都按顺序完成后，执行后续处理
      console.log('所有请求完成，开始处理最终逻辑')
      // processFinalData(userData.value, ordersData.value, statsData.value)

    } catch (err) {
      // 任何一个请求失败，都会跳转到这里
      error.value = err.message
      console.error('请求流程中出现错误:', err)
    } finally {
      loading.value = false
    }
  }

  return {
    userData,
    ordersData,
    statsData,
    loading,
    error,
    handleUserFlow
  }
}

<!-- UserProfile.vue -->
<script setup>
import { onMounted } from 'vue'
import { useUserFlow } from '@/composables/useUserFlow'

const { loading, error, handleUserFlow } = useUserFlow()

// 在组件挂载时触发串行请求
onMounted(() => {
  handleUserFlow()
})
</script>

<template>
  <div v-if="loading">加载中...</div>
  <div v-else-if="error">发生错误: {{ error }}</div>
  <div v-else>
    <!-- 渲染数据 -->
  </div>
</template>

// composables/useDashboard.js
import { ref } from 'vue'

export function useDashboard() {
  const userInfo = ref(null)
  const productList = ref(null)
  const orderStats = ref(null)
  const loading = ref(false)
  const error = ref(null)

  const loadDashboardData = async () => {
    loading.value = true
    error.value = null
    try {
      // 同时发起三个独立的请求
      const [userRes, productRes, orderRes] = await Promise.all([
        fetch('/api/user/info'),
        fetch('/api/product/list'),
        fetch('/api/order/statistics')
      ])

      // 等待所有请求都成功后，统一处理结果
      userInfo.value = await userRes.json()
      productList.value = await productRes.json()
      orderStats.value = await orderRes.json()

      console.log('所有独立请求完成，开始处理仪表盘数据')
      // updateDashboard(userInfo.value, productList.value, orderStats.value)

    } catch (err) {
      // 只要有一个请求失败，Promise.all 就会立即失败并进入 catch
      error.value = err.message
      console.error('加载仪表盘数据失败:', err)
    } finally {
      loading.value = false
    }
  }

  return {
    userInfo,
    productList,
    orderStats,
    loading,
    error,
    loadDashboardData
  }
}

async function robustDataLoad() {
  const promises = [
    fetch('/api/critical-data'), // 关键数据
    fetch('/api/optional-data-1'), // 可选数据
    fetch('/api/optional-data-2')  // 可选数据
  ]

  const results = await Promise.allSettled(promises)

  const criticalData = results[0].status === 'fulfilled' ? await results[0].value.json() : null
  const optionalData1 = results[1].status === 'fulfilled' ? await results[1].value.json() : null
  const optionalData2 = results[2].status === 'fulfilled' ? await results[2].value.json() : null

  // 即使可选数据加载失败，关键数据仍然可用
  if (criticalData) {
    renderPage(criticalData, optionalData1, optionalData2)
  } else {
    showError('关键数据加载失败')
  }
}