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>
如上代码其实就是 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 的状态是失败, 但是没有对应失败的监听就会报错, 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>
<!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>
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>
使用 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>
