catch 方法

catch 其实是 ​​then(undefined, () => {})​​ 的语法糖：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let promise = new Promise((resolve, reject) => {
            reject();
        });

        promise.catch(() => {
            console.log("失败");
        });
    </script>
</head>
<body>
</body>
</html>

Promise-catch方法_JS新特性+流行框架

如上代码其实就是 then 当中的失败方法回调的处理方法，只有在 promise 状态为失败也就是 ​​rejected​​ 状态。


注意点: 如果需要分开监听, 也就是通过 then 监听成功通过 catch 监听失败, 那么必须使用 ​​链式编程​​, 否则会报错


使用链式编程：

方式一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let promise = new Promise((resolve, reject) => {
            reject();
        });

        promise.then(() => {
            console.log("成功");
        }).catch(() => {
            console.log("失败");
        });
    </script>
</head>
<body>
</body>
</html>

方式二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let promise = new Promise((resolve, reject) => {
            reject();
        });

        promise.then(() => {
            console.log("成功");
        }, () => {
            console.log("失败");
        });
    </script>
</head>
<body>
</body>
</html>

不使用链式编程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let promise = new Promise((resolve, reject) => {
            reject();
        });

        promise.then(() => {
            console.log("成功");
        });

        promise.catch(() => {
            console.log("失败");
        });
    </script>
</head>
<body>
</body>
</html>

Promise-catch方法_链式编程_02

不使用链式编程的原因是, 如果 promise 的状态是失败, 但是没有对应失败的监听就会报错, then 方法会返回一个新的 promise, 新的 promise 会继承原有 promise 的状态, 如果新的 promise 状态是失败, 但是没有对应失败的监听也会报错。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let promise = new Promise((resolve, reject) => {
            reject();
        });

        let promiseTwo = promise.then(() => {
            console.log("成功");
        });

        console.log(promiseTwo);

        promise.catch(() => {
            console.log("失败1");
        });

        promiseTwo.catch(() => {
            console.log("失败2");
        });
    </script>
</head>
<body>
</body>
</html>

Promise-catch方法_回调函数_03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let promise = new Promise((resolve, reject) => {
            reject();
        });

        let promiseTwo = promise.then(() => {
            console.log("成功");
        });

        console.log(promiseTwo);

        promise.catch(() => {
            console.log("失败1");
        });
    </script>
</head>
<body>
</body>
</html>

Promise-catch方法_html_04

catch 方法特点

和 then 一样, 在修改 promise 状态时, 可以传递参数给 catch 方法中的回到函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let promise = new Promise((resolve, reject) => {
            reject("BNTang");
        });

        promise.catch((data) => {
            console.log(data);
        });
    </script>
</head>
<body>
</body>
</html>

和 then 一样, 同一个 promise 对象可以多次调用 catch 方法，当该 promise 对象的状态修改时所有 catch 方法都会被执行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let promise = new Promise((resolve, reject) => {
            reject("BNTang");
        });

        promise.catch((data) => {
            console.log(data);
        });

        promise.catch((data) => {
            console.log(data);
        });

        promise.catch((data) => {
            console.log(data);
        });
    </script>
</head>
<body>
</body>
</html>

和 then 一样, catch 方法每次执行完毕后会返回一个新的 promise 对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let promise = new Promise((resolve, reject) => {
            reject("BNTang");
        });

        let newPromise = promise.catch((data) => {
            console.log(data);
        });

        console.log(newPromise);
        console.log(newPromise === promise);
    </script>
</head>
<body>
</body>
</html>

和 then 方法一样, 上一个 promise 对象也可以给下一个 promise 成功的回调函数传递参数：


注意点: 无论是在上一个 promise 对象成功的回调还是失败的回调传递的参数, 都会传递给下一个 promise 对象 ​​成功​​ 的回调函数当中


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let promise = new Promise((resolve, reject) => {
            reject("BNTang");
        });

        let newPromise = promise.catch((data) => {
            console.log(data);
            return "Jonathan_Lee";
        });

        newPromise.then((data) => {
            console.log("newPromise 成功", data);
        }, (data) => {
            console.log("newPromise 失败", data);
        });
    </script>
</head>
<body>
</body>
</html>

和 then 一样, catch 方法如果返回的是一个 Promise 对象, 那么会将返回的 Promise 对象的, 执行结果中的值传递给下一个 catch 方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let promise = new Promise((resolve, reject) => {
            reject("BNTang");
        });

        let promiseTwo = new Promise((resolve, reject) => {
            resolve("promiseTwo resolve");
            // reject("promiseTwo reject");
        });

        let newPromise = promise.catch((data) => {
            console.log(data);
            return promiseTwo;
        });

        newPromise.then((data) => {
            console.log("newPromise 成功", data);
        }, (data) => {
            console.log("newPromise 失败", data);
        });
    </script>
</head>
<body>
</body>
</html>

和 then 方法第二个参数的区别在于, catch 方法可以捕获上一个 promise 对象 then 方法中的异常：

不用 catch 的情况下捕获效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let promise = new Promise((resolve, reject) => {
            resolve();
        });

        promise.then(() => {
            console.log("成功");
            xxx
        }, () => {
            console.log("失败");
        });
    </script>
</head>
<body>
</body>
</html>

Promise-catch方法_回调函数_05

使用 catch 的情况下捕获效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let promise = new Promise((resolve, reject) => {
            resolve();
        });

        promise.then(() => {
            console.log("成功");
            xxx
        }).catch((e) => {
            console.log("失败", e);
        });
    </script>
</head>
<body>
</body>
</html>

Promise-catch方法_html_06