<script setup>
import { onMounted } from 'vue'
onMounted(() => {
  console.log('1. 開始同步執(zhí)行')
  // 函數(shù)1
  const result1 = function1()
  console.log('函數(shù)1完成:', result1)
  // 函數(shù)2（依賴函數(shù)1的結(jié)果）
  const result2 = function2(result1)
  console.log('函數(shù)2完成:', result2)
  // 函數(shù)3（依賴函數(shù)2的結(jié)果）
  const result3 = function3(result2)
  console.log('函數(shù)3完成:', result3)
  console.log('所有同步函數(shù)執(zhí)行完成')
})
function function1() {
  console.log('執(zhí)行 function1')
  return 'function1 的結(jié)果'
}
function function2(input) {
  console.log('執(zhí)行 function2，輸入:', input)
  return input + ' -> 經(jīng)過function2處理'
}
function function3(input) {
  console.log('執(zhí)行 function3，輸入:', input)
  return input + ' -> 經(jīng)過function3處理'
}
</script>

<script setup>
import { onMounted } from 'vue'
onMounted(async () => {
  console.log('?? 開始順序執(zhí)行異步任務(wù)')
  try {
    // 1. 等待第一個(gè)異步任務(wù)完成
    const user = await fetchUserData()
    console.log('? 用戶數(shù)據(jù)獲取完成:', user.name)
    // 2. 等待第二個(gè)異步任務(wù)（依賴第一個(gè)結(jié)果）
    const orders = await fetchUserOrders(user.id)
    console.log('? 訂單數(shù)據(jù)獲取完成，數(shù)量:', orders.length)
    // 3. 等待第三個(gè)異步任務(wù)
    const analytics = await initAnalytics(orders)
    console.log('? 分析工具初始化完成')
    console.log('?? 所有任務(wù)順序執(zhí)行完成')
  } catch (error) {
    console.error('? 執(zhí)行失敗:', error)
  }
})
// 模擬異步函數(shù)
async function fetchUserData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id: 1, name: '張三' })
    }, 1000)
  })
}
async function fetchUserOrders(userId) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([{ id: 1, product: '商品A' }, { id: 2, product: '商品B' }])
    }, 1500)
  })
}
async function initAnalytics(orders) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ events: orders.length })
    }, 500)
  })
}
</script>

<script setup>
import { onMounted, ref } from 'vue'
const loading = ref(true)
const data = ref({})
onMounted(async () => {
  console.log('?? 開始并行執(zhí)行任務(wù)')
  const startTime = Date.now()
  try {
    // 并行執(zhí)行所有異步任務(wù)
    const [userData, configData, permissions] = await Promise.all([
      fetchUserData(),
      fetchConfigData(),
      fetchUserPermissions()
    ])
    const endTime = Date.now()
    console.log(`? 所有并行任務(wù)完成，耗時(shí): ${endTime - startTime}ms`)
    // 整合數(shù)據(jù)
    data.value = { ...userData, ...configData, permissions }
    loading.value = false
    console.log('?? 數(shù)據(jù)整合完成:', data.value)
  } catch (error) {
    console.error('? 并行執(zhí)行失敗:', error)
    loading.value = false
  }
})
async function fetchUserData() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('? 用戶數(shù)據(jù)獲取完成')
      resolve({ name: '張三', age: 25 })
    }, 2000)  // 模擬2秒延遲
  })
}
async function fetchConfigData() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('? 配置數(shù)據(jù)獲取完成')
      resolve({ theme: 'dark', language: 'zh-CN' })
    }, 1500)  // 模擬1.5秒延遲
  })
}
async function fetchUserPermissions() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('? 權(quán)限數(shù)據(jù)獲取完成')
      resolve(['read', 'write', 'delete'])
    }, 1000)  // 模擬1秒延遲
  })
}
</script>

<script setup>
import { onMounted, ref } from 'vue'
const results = ref({})
onMounted(async () => {
  console.log('?? 開始并行執(zhí)行任務(wù)（包含容錯(cuò)）')
  // 使用 allSettled，即使某個(gè)任務(wù)失敗也不會中斷
  const settledResults = await Promise.allSettled([
    fetchUserData(),
    fetchConfigData(),
    fetchUserPermissions(),
    fetchOptionalData()  // 這個(gè)可能失敗
  ])
  // 處理結(jié)果
  const successResults = {}
  const failedResults = {}
  settledResults.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      successResults[`task${index}`] = result.value
    } else {
      failedResults[`task${index}`] = result.reason
    }
  })
  results.value = { success: successResults, failed: failedResults }
  console.log('?? 執(zhí)行結(jié)果:', results.value)
})
async function fetchUserData() {
  return Promise.resolve({ user: '張三' })
}
async function fetchConfigData() {
  return Promise.resolve({ theme: 'dark' })
}
async function fetchUserPermissions() {
  return Promise.resolve(['read', 'write'])
}
async function fetchOptionalData() {
  // 模擬可能失敗的任務(wù)
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve({ optional: 'data' })
      } else {
        reject(new Error('Optional data fetch failed'))
      }
    }, 500)
  })
}
</script>

<script setup>
import { onMounted, ref } from 'vue'
const executionLog = ref([])
onMounted(async () => {
  console.log('?? 開始混合執(zhí)行策略')
  addLog('開始執(zhí)行')
  try {
    // 階段1：并行加載不依賴的數(shù)據(jù)
    addLog('階段1: 并行加載基礎(chǔ)數(shù)據(jù)')
    const [user, config] = await Promise.all([
      fetchUserData(),
      fetchConfigData()
    ])
    addLog('階段1完成')
    // 階段2：順序執(zhí)行依賴任務(wù)
    addLog('階段2: 順序加載依賴數(shù)據(jù)')
    const orders = await fetchUserOrders(user.id)
    addLog('訂單數(shù)據(jù)加載完成')
    const analytics = await initAnalytics(orders)
    addLog('分析工具初始化完成')
    // 階段3：并行執(zhí)行最后步驟
    addLog('階段3: 并行執(zhí)行清理和通知')
    await Promise.all([
      sendAnalytics(analytics),
      updateUserLastLogin(user.id)
    ])
    addLog('階段3完成')
    addLog('?? 所有任務(wù)完成')
  } catch (error) {
    addLog(`? 執(zhí)行失敗: ${error.message}`)
  }
})
function addLog(message) {
  const timestamp = new Date().toLocaleTimeString()
  executionLog.value.push(`${timestamp}: ${message}`)
  console.log(message)
}
// 模擬函數(shù)
async function fetchUserData() {
  await delay(1000)
  return { id: 1, name: '張三' }
}
async function fetchConfigData() {
  await delay(800)
  return { theme: 'dark' }
}
async function fetchUserOrders() {
  await delay(1200)
  return [{ id: 1 }, { id: 2 }]
}
async function initAnalytics() {
  await delay(600)
  return { initialized: true }
}
async function sendAnalytics() {
  await delay(300)
}
async function updateUserLastLogin() {
  await delay(400)
}
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}
</script>

<script setup>
import { onMounted, ref } from 'vue'
const tasks = ref(Array.from({ length: 10 }, (_, i) => ({
  id: i + 1,
  status: 'pending',
  result: null
})))
onMounted(async () => {
  console.log('?? 開始帶并發(fā)限制的執(zhí)行')
  // 并發(fā)數(shù)限制為3
  const concurrencyLimit = 3
  const taskPromises = tasks.value.map(task => task.id)
  // 分批次執(zhí)行
  for (let i = 0; i < taskPromises.length; i += concurrencyLimit) {
    const batch = taskPromises.slice(i, i + concurrencyLimit)
    console.log(`執(zhí)行批次 ${i / concurrencyLimit + 1}: 任務(wù) ${batch.join(', ')}`)
    // 并行執(zhí)行當(dāng)前批次
    const batchPromises = batch.map(async taskId => {
      const task = tasks.value.find(t => t.id === taskId)
      task.status = 'running'
      try {
        const result = await simulateTask(taskId)
        task.status = 'completed'
        task.result = result
        console.log(`? 任務(wù) ${taskId} 完成`)
      } catch (error) {
        task.status = 'failed'
        task.result = error.message
        console.log(`? 任務(wù) ${taskId} 失敗`)
      }
    })
    // 等待當(dāng)前批次所有任務(wù)完成
    await Promise.all(batchPromises)
  }
  console.log('?? 所有批次執(zhí)行完成')
})
async function simulateTask(taskId) {
  // 模擬隨機(jī)耗時(shí)任務(wù)
  const duration = 500 + Math.random() * 1000
  await delay(duration)
  // 模擬10%的失敗率
  if (Math.random() < 0.1) {
    throw new Error(`任務(wù) ${taskId} 模擬失敗`)
  }
  return `任務(wù) ${taskId} 結(jié)果，耗時(shí) ${Math.round(duration)}ms`
}
</script>

<script setup>
import { onMounted, ref } from 'vue'
class TaskQueue {
  constructor(concurrency = 1) {
    this.concurrency = concurrency
    this.running = 0
    this.queue = []
  }
  add(task) {
    return new Promise((resolve, reject) => {
      this.queue.push({ task, resolve, reject })
      this.run()
    })
  }
  run() {
    while (this.running < this.concurrency && this.queue.length) {
      const { task, resolve, reject } = this.queue.shift()
      this.running++
      task()
        .then(resolve)
        .catch(reject)
        .finally(() => {
          this.running--
          this.run()
        })
    }
  }
}
const executionOrder = ref([])
onMounted(async () => {
  console.log('?? 使用隊(duì)列控制執(zhí)行順序')
  // 創(chuàng)建并發(fā)數(shù)為2的隊(duì)列
  const queue = new TaskQueue(2)
  // 添加任務(wù)到隊(duì)列
  const tasks = [
    () => simulateTask('任務(wù)A', 1000),
    () => simulateTask('任務(wù)B', 800),
    () => simulateTask('任務(wù)C', 1200),
    () => simulateTask('任務(wù)D', 600),
    () => simulateTask('任務(wù)E', 900)
  ]
  // 記錄執(zhí)行順序
  const addToOrder = (taskName) => {
    executionOrder.value.push({
      time: Date.now(),
      task: taskName
    })
  }
  // 并行執(zhí)行所有任務(wù)（但限制并發(fā)數(shù)）
  const startTime = Date.now()
  addToOrder('開始執(zhí)行')
  await Promise.all(tasks.map((task, index) => 
    queue.add(async () => {
      addToOrder(`開始 ${task.name}`)
      await task()
      addToOrder(`完成 ${task.name}`)
    })
  ))
  addToOrder(`全部完成，總耗時(shí): ${Date.now() - startTime}ms`)
  console.log('?? 執(zhí)行順序:', executionOrder.value)
})
async function simulateTask(name, duration) {
  console.log(`開始執(zhí)行 ${name}`)
  await delay(duration)
  console.log(`完成 ${name}`)
  return name
}
</script>

<script setup>
import { onMounted, ref } from 'vue'
const steps = ref([])
onMounted(async () => {
  console.log('?? 使用生成器控制執(zhí)行流程')
  // 定義任務(wù)生成器
  async function* taskGenerator() {
    steps.value.push('1. 初始化')
    yield await initApp()
    steps.value.push('2. 加載用戶數(shù)據(jù)')
    const user = yield await loadUserData()
    steps.value.push('3. 根據(jù)用戶角色加載不同數(shù)據(jù)')
    if (user.role === 'admin') {
      yield await loadAdminData()
    } else {
      yield await loadUserSpecificData(user.id)
    }
    steps.value.push('4. 完成初始化')
    yield await finalizeInit()
  }
  // 執(zhí)行生成器
  const generator = taskGenerator()
  let result = await generator.next()
  while (!result.done) {
    console.log('步驟完成:', result.value)
    result = await generator.next()
  }
  console.log('?? 所有步驟完成')
  console.log('步驟記錄:', steps.value)
})
async function initApp() {
  await delay(500)
  return '應(yīng)用初始化完成'
}
async function loadUserData() {
  await delay(800)
  return { id: 1, name: '張三', role: 'admin' }
}
async function loadAdminData() {
  await delay(1000)
  return '管理員數(shù)據(jù)加載完成'
}
async function loadUserSpecificData() {
  await delay(600)
  return '用戶數(shù)據(jù)加載完成'
}
async function finalizeInit() {
  await delay(300)
  return '初始化完成'
}
</script>

<script setup>
import { onMounted, ref } from 'vue'
const attempts = ref({})
onMounted(async () => {
  console.log('?? 開始帶重試機(jī)制的執(zhí)行')
  // 重試配置
  const retryConfig = {
    maxRetries: 3,
    retryDelay: 1000,
    onRetry: (taskName, attempt) => {
      console.log(`?? ${taskName} 第 ${attempt} 次重試`)
    }
  }
  // 執(zhí)行帶重試的任務(wù)
  const result = await executeWithRetry(
    fetchCriticalData,
    ['關(guān)鍵數(shù)據(jù)'],
    retryConfig
  )
  console.log('?? 最終結(jié)果:', result)
})
// 重試執(zhí)行器
async function executeWithRetry(task, args, config) {
  const { maxRetries, retryDelay, onRetry } = config
  let lastError
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      if (attempt > 0 && onRetry) {
        onRetry(task.name, attempt)
      }
      attempts.value[task.name] = (attempts.value[task.name] || 0) + 1
      return await task(...args)
    } catch (error) {
      lastError = error
      console.log(`? ${task.name} 第 ${attempt} 次失敗:`, error.message)
      if (attempt < maxRetries) {
        await delay(retryDelay)
      }
    }
  }
  throw lastError
}
// 模擬可能失敗的任務(wù)
async function fetchCriticalData() {
  const shouldFail = Math.random() < 0.7  // 70%失敗率
  await delay(300)
  if (shouldFail) {
    throw new Error('網(wǎng)絡(luò)請求失敗')
  }
  return { data: '重要數(shù)據(jù)' }
}
</script>

// 適用于有依賴關(guān)系的任務(wù)
onMounted(async () => {
  const data1 = await task1()      // 必須先完成
  const data2 = await task2(data1) // 依賴data1
  const data3 = await task3(data2) // 依賴data2
})

// 適用于獨(dú)立任務(wù)，提高效率
onMounted(async () => {
  const [result1, result2, result3] = await Promise.all([
    task1(),  // 獨(dú)立任務(wù)
    task2(),  // 獨(dú)立任務(wù)
    task3()   // 獨(dú)立任務(wù)
  ])
})

// 組合使用，先并行后順序
onMounted(async () => {
  // 并行加載基礎(chǔ)數(shù)據(jù)
  const [user, config] = await Promise.all([
    fetchUser(),
    fetchConfig()
  ])
  // 順序處理依賴數(shù)據(jù)
  const orders = await fetchOrders(user.id)
  await processOrders(orders)
  // 最后并行清理
  await Promise.all([
    sendAnalytics(),
    updateCache()
  ])
})

onMounted(async () => {
  try {
    // 主任務(wù)
    await mainTask()
  } catch (error) {
    console.error('主任務(wù)失敗:', error)
    // 降級處理
    await fallbackTask()
  } finally {
    // 清理資源
    await cleanup()
  }
})

onMounted(async () => {
  const startTime = performance.now()
  // 執(zhí)行任務(wù)
  await yourTasks()
  const endTime = performance.now()
  console.log(`?? 執(zhí)行耗時(shí): ${Math.round(endTime - startTime)}ms`)
  // 可以發(fā)送到監(jiān)控系統(tǒng)
  if (endTime - startTime > 2000) {
    console.warn('?? 執(zhí)行時(shí)間過長')
  }
})