Promise错误处理比较：使用then的第二个参数还是catch

news2025/8/14 18:11:39

catch是一个语法糖而己还是通过then来处理的

如果在then的第一个函数里抛出了异常，后面的catch能捕获到，而then的第二个函数捕获不到。
catch是一个语法糖而己还是通过then 来处理的：

Promise.prototype.catch = function(fn){
    return this.then(null,fn);
}

建议总是使用catch方法

建议总是使用catch方法，而不使用then方法的第二个参数。

具体代码比较

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>promise</title>
  </head>
  <body>
    <script>
      const promise = new Promise((resolve, rejected) => {
        throw new Error("test");
      });

      //此时只有then的第二个参数可以捕获到错误信息
      promise
        .then(
          (res) => {
            //
          },
          (err) => {
            console.log("1:既有error,又有catch。只有error会被执行");
            console.log("err: " + err);
          }
        )
        .catch((err1) => {
          console.log("catch: " + err1);
        });

      //此时catch方法可以捕获到错误信息
      promise
        .then((res) => {
          //
        })
        .catch((err1) => {
          console.log("2:只有catch");
          console.log("catch: " + err1);
        });

      //此时只有then的第二个参数可以捕获到Promise内部抛出的错误信息
      promise
        .then(
          (res) => {
            throw new Error("hello");
          },
          (err) => {
            console.log("3: 既有error,又有catch。then里面又抛出error。只有error会被执行");
            console.log("error: " + err);
          }
        )
        .catch((err1) => {
          console.log("catch: " + err1);
        });

      //此时只有then的第二个参数可以捕获到Promise内部抛出的错误信息
      promise.then(
        (res) => {
          throw new Error("hello");
        },
        (err) => {
          console.log("4: 只有error,没有catch，then里面又抛出error。只有error会被执行");
          console.log("error: " + err);
        }
      );

      //此时catch可以捕获到Promise内部抛出的错误信息
      promise
        .then((res) => {
          throw new Error("hello");
        })
        .catch((err1) => {
          console.log("5: 只有catch，then里面又抛出error");
          console.log("catch: " + err1);
        });
    </script>
  </body>
</html>