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>
