React JavaScript中Promise数组catch未触发及Promise.all报错排查

第一版代码：catch不触发的原因 #

你遇到的“控制台能看到Promise内部错误、但自己写的catch完全不触发”的情况，核心原因主要有两类：

• 最常见的诱因是你生成任务Promise的时候漏了最关键的一步：在实现文件读取这类异步逻辑时，只在错误回调里打了console.log，根本没有调用reject()把错误向外抛出。这种情况下Promise永远停留在pending状态，根本不会进入reject状态，你在外层链路上挂的catch自然永远收不到错误。你在控制台看到的错误，只是Promise内部console.log打出来的文本，不是Promise状态变更传递出来的信号。
• 另一类情况是你在生成每个Promise的阶段，提前给它挂了一个空的catch处理，把错误提前截获了，后续再挂载的catch永远拿不到已经被处理过的错误——Promise链上的错误只会冒泡到离它最近的捕获点，被处理过的错误不会再向外传递。

第二版改造：报p.then is not a function的原因 #

这个问题本质是对Promise.all的行为有概念误解：

• Promise.all(promArray)的作用是等待传入的Promise集合全部执行完成，然后把每个Promiseresolve的返回值收集成数组，传给下一个then的回调。它不会把你一开始传进去的原始Promise实例原样返回。你现在拿到的数组元素全是任务跑完后的普通值（字符串、文件对象之类的），根本不是Promise，当然没有.then方法。
• 你的执行顺序完全搞反了：你先把所有原始任务全部跑完，等结果出来了才想着给每个结果值挂.then做进度追踪。这时候所有任务早就执行完了，就算你挂上去的逻辑能运行，也永远拿不到执行过程中的进度变化，更不可能触发错误捕获。

要做带进度追踪的Promise批量执行，核心要记住两个原则：

• 所有进度、错误的捕获逻辑，必须在任务发起执行之前就绑定好，不能等任务跑完了再补。
• 任务本身的错误必须通过reject显式抛出，不能只在内部打日志就完事。

具体实现可以参考下面的写法：

// 单任务实现：确保错误会通过reject向外抛出
const readFileTask = (file) => new Promise((resolve, reject) => {
  const fileReader = new FileReader()
  fileReader.onload = () => resolve(fileReader.result)
  fileReader.onerror = () => {
    console.log('文件读取内部错误', fileReader.error)
    reject(fileReader.error) // 关键：显式抛出错误
  }
  fileReader.readAsDataURL(file)
})

// 进度追踪函数
function watchProgress(promArray) {
  let progress = 0
  const totalCount = promArray.length

  // 提前给每个任务绑定成功/失败的进度更新逻辑
  const processedTasks = promArray.map(originalPromise => {
    return originalPromise
      .then(successRes => {
        progress += 1
        const percent = Math.floor((progress / totalCount) * 100)
        setProgressValue(percent)
        return successRes
      })
      .catch(taskErr => {
        console.log('外层捕获到任务错误', taskErr)
        // 不管成功失败都累加进度，避免进度条永远卡在中间
        progress += 1
        const percent = Math.floor((progress / totalCount) * 100)
        setProgressValue(percent)
        // 把错误包装成普通返回值，避免单个任务失败导致Promise.all直接中断
        return { isFailed: true, error: taskErr }
      })
  })

  // 最后用Promise.all汇总所有处理过的任务结果
  Promise.all(processedTasks).then(allResults => {
    console.log('全部任务执行完成', allResults)
  })
}

内容的提问来源于stack exchange，提问作者Kid