then 方法
then 方法接收兩個參數
- 第一個參數是狀態切換為成功時的回調
- 第二個參數是狀態切換為失敗時的回調
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let promise = new Promise(function (resolve, reject) {
// 將狀態修改為成功
// resolve();
// 將狀態修改為失敗
reject();
});
promise.then(function () {
console.log("成功");
}, function () {
console.log("失敗");
});
</script>
</head>
<body>
</body>
</html>
在修改 promise 狀態時, 可以傳遞參數給 then 方法中的回到函數：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let promise = new Promise(function (resolve, reject) {
// 將狀態修改為成功
// resolve("BNTang");
// 將狀態修改為失敗
reject("BNTang");
});
promise.then(function (data) {
console.log("成功", data);
}, function (data) {
console.log("失敗", data);
});
</script>
</head>
<body>
</body>
</html>
如上是一種接收參數的方式還有另外一種如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let promise = new Promise(function (resolve, reject) {
// 將狀態修改為成功
resolve("BNTang");
// 將狀態修改為失敗
// reject("BNTang");
});
function success(data) {
console.log("成功", data);
}
function error(data) {
console.log("失敗", data);
}
promise.then(success, error);
</script>
</head>
<body>
</body>
</html>
同一個 promise 對象可以多次調用 then 方法, 當該 promise 對象的狀態發生改變時所有 then 方法都會被執行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let promise = new Promise(function (resolve, reject) {
// 將狀態修改為成功
resolve("BNTang");
// 將狀態修改為失敗
// reject("BNTang");
});
promise.then(function (data) {
console.log("成功1", data);
}, function (data) {
console.log("失敗1", data);
});
promise.then(function (data) {
console.log("成功2", data);
}, function (data) {
console.log("失敗2", data);
});
</script>
</head>
<body>
</body>
</html>
如上是成功的 then 方法執行的效果圖，如果是失敗呢，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let promise = new Promise(function (resolve, reject) {
// 將狀態修改為成功
// resolve("BNTang");
// 將狀態修改為失敗
reject("BNTang");
});
promise.then(function (data) {
console.log("成功1", data);
}, function (data) {
console.log("失敗1", data);
});
promise.then(function (data) {
console.log("成功2", data);
}, function (data) {
console.log("失敗2", data);
});
</script>
</head>
<body>
</body>
</html>
then 方法每次執行完畢后會返回一個新的 promise 對象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let promise = new Promise(function (resolve, reject) {
// 將狀態修改為成功
// resolve("BNTang");
// 將狀態修改為失敗
reject("BNTang");
});
let newPromise = promise.then(function (data) {
console.log("成功1", data);
}, function (data) {
console.log("失敗1", data);
});
console.log(newPromise);
console.log(newPromise === promise);
</script>
</head>
<body>
</body>
</html>
可以通過上一個 promise 對象的 then 方法給下一個 promise 對象的 then 方法傳遞參數：
注意點: 無論是在上一個 promise 對象成功的回調還是失敗的回調傳遞的參數, 都會傳遞給下一個 promise 對象
成功的回調函數當中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let promise = new Promise(function (resolve, reject) {
// 將狀態修改為成功
resolve("BNTang");
// 將狀態修改為失敗
// reject("BNTang");
});
let newPromise = promise.then(function (data) {
console.log("成功1", data);
return "BNTang test";
}, function (data) {
console.log("失敗1", data);
});
newPromise.then(function (data) {
console.log("new Promise", data);
}, function (data) {
console.log("new Promise error", data);
});
</script>
</head>
<body>
</body>
</html>
如果 then 方法返回的是一個 Promise 對象, 那么會將返回的 Promise 對象的，執行結果中的值傳遞給下一個 then 方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let promise = new Promise(function (resolve, reject) {
resolve("BNTang");
});
let promiseTwo = new Promise(function (resolve, reject) {
reject("promiseTwo reject");
});
let newPromise = promise.then(function (data) {
console.log("成功1", data);
return promiseTwo;
}, function (data) {
console.log("失敗1", data);
});
newPromise.then(function (data) {
console.log("new Promise", data);
}, function (data) {
console.log("new Promise error", data);
});
</script>
</head>
<body>
</body>
</html>
