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>
