Promise-then方法

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>