使用try catch无法捕获filepath[0]不可迭代的TypeError致应用崩溃求助

你捕获不到错误主要是俩问题，再加上代码里的逻辑混乱导致的：

1. catch块写法错了：你写的catch(TypeError)不是只抓TypeError类型的错误，而是把抓到的错误对象起名叫TypeError，还会覆盖全局的TypeError构造函数，纯属给自己挖坑。而且这种写法容易让你误以为只处理特定错误，但实际不管啥错都会进这个块——但更关键的是，你这代码里的同步错误本该被try catch兜住，结果因为写法混淆，可能你自己都没意识到逻辑有问题。

2. 没提前判断filepath[0]的有效性：用户没上传文件时，filepath[0]大概率是undefined或者空值，直接用for...of遍历肯定会炸，虽然try catch理论上能抓，但提前判断比事后救火更靠谱。

另外，你代码里混用await和.then()/.catch()，这会把错误处理逻辑搅得一团糟，建议统一风格。

改好的代码参考： #

// 得确保这段代码在async函数里
async function handleUpload() {
  try {
    // 先检查有没有可迭代的文件列表，从根儿上避免报错
    if (!filepath[0] || typeof filepath[0][Symbol.iterator] !== 'function') {
      setError(new TypeError('没选文件啊'));
      setFilepath([]);
      return;
    }

    for (const file of filepath[0]) {
      const filename = file.name;
      // 别混用await和then了，统一用try catch处理请求错误
      try {
        const json = await axios.post('/api/filesRoute/fs', { filename });
        console.log('上传成功:', filename);
        raws.push(json.data.id);
      } catch (reqErr) {
        setError(reqErr);
        setFilepath([]);
        // 要是想上传失败就中断，这儿加个return就行
        // return;
      }
    }
  } catch (err) {
    // 抓其他意外错误，比如判断完还是出问题的情况
    if (err instanceof TypeError) {
      setError(new TypeError('文件列表有问题，重新选吧'));
    } else {
      setError(err);
    }
    setFilepath([]);
  }
}

重点改了啥： #

• 提前校验：遍历前先确认filepath[0]存在且能迭代，不让错误发生，比捕获错误体验好。
• 错误处理统一：把axios的then/catch换成await加内层try catch，逻辑顺多了。
• 正确用catch：用普通变量名接错误，还能通过instanceof判断错误类型，针对性处理。
• 别污染全局变量：别用TypeError当catch参数名，不然全局的TypeConstructor就被你覆盖了。

最后，调用这个async函数的时候，要是怕还有漏网的错误，也可以在外层加个兜底：

handleUpload().catch(err => {
  console.error('上传出问题了:', err);
});

这样不管用户选没选文件，都不会崩了。

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