Promise链式调用的应用

26857259

已于 2024-02-21 10:17:36 修改

阅读量246

点赞数

分类专栏：技术干货文章标签： javascript vue.js 前端

于 2022-03-09 16:24:57 首次发布

本文链接：https://blog.csdn.net/qq_26857259/article/details/123380689

版权

技术干货专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Promise链式调用的应用

then在链式调用时，会等前一个then或者函数执行完毕，返回状态，才会执行回调函数。

（1）代码顺序执行，第一步调用了函数cook ，cook执行返回了一个promise，promise返回的是成功状态，即resolve(‘鸡蛋炒饭’)，那么参数“‘鸡蛋炒饭’”会传递给下一个then。
（2）第一个then接收“‘鸡蛋炒饭’”，执行then的回调。回调中调用了eat，把’鸡蛋炒饭’作为参数传递给了eat。eat执行（里面输出的步骤就不讲了，代码顺序执行，输出的“开始吃饭”等等），并返回promise，promise返回的是成功状态，并给下一个then传递了参数’一块碗和一双筷子’。
（3）第二个then接收’一块碗和一双筷子’，‘执行then的回调。回调中调用了wash，把’一块碗和一双筷子’作为参数传递给了wash。wash执行，并返回promise，promise返回成功状态，并给下一个then传递了参数’干净的碗筷’。
（4）最后一个then，接收’干净的碗筷”，执行回调，输出’干净的碗筷”。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    <body>
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
        <script type="text/javascript">
            function cook() {
                console.log("开始做饭。");
                var p = new Promise(function (resolve, reject) {
                    setTimeout(function () {
                        console.log("做饭完毕！");
                        resolve("鸡蛋炒饭");
                    }, 1000);
                });
                return p;
            }

            function eat(data) {
                console.log("开始吃饭：" + data);
                var p = new Promise(function (resolve, reject) {
                    setTimeout(function () {
                        console.log("吃饭完毕!");
                        resolve("一块碗和一双筷子"); // resolve()的值会传递给then中function的data参数，供下一个方法使用。
                    }, 2000);
                });
                //这里的return的作用是把第一个回调函数的返回结果作为参数,传递给第二个回调函数
                return p;
            }
            function wash(data) {
                console.log("开始洗碗：" + data);
                var p = new Promise(function (resolve, reject) {
                    setTimeout(function () {
                        console.log("洗碗完毕!");
                        resolve("干净的碗筷");
                    }, 2000);
                });
                return p;
            }
            //补充代码
            cook()
                .then((resolve) => {
                    return eat(resolve); //第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。所以这里要用return返回函数去传参。
                })
                .then((resolve) => {
                    return wash(resolve);
                })
                .then((resolve) => {
                    //在Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

                    //then方法执行的是resolve这个回调，并且这个函数都接受Promise对象传出的值作为参数。而这里“鸡蛋炒饭”就是作为参数传递的
                    console.log(resolve); //resolve中的值是传递到then方法中的参数,只有在then中通过console.log输出传入的参数,才可以在控制台查看到消息
                });
            //也可以像下面这样写,因为这三个函数本身设置的有return才可以这样直接写
            //下一个then的回调函数,会等上一个then中的回调函数执行完毕,返回promise状态,就执行.
            //首先eat,wash本身就是一个函数,所以可以直接作为then中的回到函数.
            //然后eat,wash函数内部也返回了promise,所以这样写没有问题.
            cook().then(eat).then(wash);
        </script>
    </body>
</html>