首页 技术设计 前端 js

使用 Promise 并发执行并在全部完成后继续。常用做法有 Promise.all（任一失败则抛错）、Promise.allSettled（全部完成后继续并分别处理成功 / 失败）。示例代码：

使用 Promise.all（所有成功后继续，任一失败会进入 catch）：

// ...existing code...
async function loadGroupModel(group) {
  // 并行启动多个异步任务（这些函数返回 Promise）
  const tasks = [
    loadModelA(group),
    loadModelB(group),
    loadTexture(group),
    initAnimations(group)
  ]
  try {
    // 等待所有任务完成
    const [modelA, modelB, texture, anims] = await Promise.all(tasks)
    // 所有任务成功后执行下一步
    onAllLoaded({ modelA, modelB, texture, anims })
  } catch (err) {
    console.error('loadGroupModel 出错:', err)
    // 根据需求处理失败：重试 / 回退 / 通知用户 等
  }
}
// ...existing code...
使用 Promise.allSettled（即使有失败也继续，按需处理失败项）：
// ...existing code...
async function loadGroupModel(group) {
  const tasks = [
    loadModelA(group),
    loadModelB(group),
    loadTexture(group),
    initAnimations(group)
  ]
  const results = await Promise.allSettled(tasks)
  const successes = results
    .map(r => (r.status === 'fulfilled' ? r.value : null))
  const errors = results
    .map((r, i) => (r.status === 'rejected' ? { index: i, reason: r.reason } : null))
    .filter(Boolean)
  if (errors.length) {
    console.warn('部分任务失败：', errors)
    // 按需处理失败（跳过 / 重试 / 报错等）
  }
  onAllLoaded({ successes })
}
// ...existing code...
如果任务很多或需要限流，可用简单限流器或第三方库（p-limit）控制并发：
// ...existing code...
import pLimit from 'p-limit'
async function loadGroupModel(group, concurrency = 4) {
  const limit = pLimit(concurrency)
  const items = [/* 要加载的资源数组 */]
  const tasks = items.map(item => limit(() => loadItem(item, group)))
  const results = await Promise.all(tasks)
  onAllLoaded(results)
}
// ...existing code...