• 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>
                                                                                                                
    .then 中
    1.return返回一个值,将返回的值作为下一个then中回调函数的参数值
    2.如果返回的是一个promise对象,将这个Promise 接受状态的回调函数中参数值作为下一个then回调函数的参数值。

    .then(fn(argument){})中的匿名函数实际上就是执行实例化Promise对象中的resolve(),当resolve(argument)中有参数时,可以将参数传给.then()中的匿名函数

    这里原理都是一样的,就是Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。且都会返回一个Promise实例,所以可以链式调用then方法,上一个的返回值,可以作为下一个的参数。
  • 相关阅读:
    Android ---------- 下拉刷新,上拉加载
    Android ---------- 富文本构建
    php操作字符串(移除字符,计算字符串中字符个数,分割字符串,字符串序列化
    Android ---------- 弹出层自定义布局 之 AlertDialog
    Android ---------- 延时操作
    Android ---------- TabLayout 实战 (二) 仿京东商品详情页
    定风波·莫听穿林打叶声
    hiveSQL执行,转化为MR过程
    who 命令显示关于当前在本地系统上的所有用户的信息
    hadoop中压缩与解压详解
  • 原文地址:https://www.cnblogs.com/rickdiculous/p/13281578.html
Copyright © 2020-2023  润新知