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方法，上一个的返回值，可以作为下一个的参数。

promise链式调用的应用的更多相关文章

  1. 使用Promise链式调用解决多个异步回调的问题

    使用Promise链式调用解决多个异步回调的问题 比如我们平常经常遇到的一种情况: 网站中需要先获取用户名,然后再根据用户名去获取用户信息.这里获取用户名getUserName()和获取用户信息get ...

  2. Promise链式调用 终止或取消

    Promise回调分两种方法,then成功,catch失败 let promise = new Promise(function(resolve, reject){ resolve('第一次成功') ...

  3. 中断或取消Promise链的可行方案

    ES6标准引入的异步编程解决方案Promise,能够将层层嵌套的回调转化成扁平的Promise链式调用,优雅地解决了“回调地狱”的问题.当Promise链中抛出一个错误时,错误信息沿着链路向后传递,直 ...

  4. 如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用

    1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...

  5. jquery中链式调用原理

    (1).链式调用 $("#mybtn").css("width","100px") .css("height",&quo ...

  6. javascript方法链式调用和构造函数链式调用对比

    先说一下方法链:B的实例从A继承了A中的同名方法,如果B的方法重载了A中的方法,B中的重载方法可能会调用A中的重载方法,这种方法称为方法链. 构造函数链:子类的构造函数B()有时需要调用父类的构造函数 ...

  7. 第51讲：Scala中链式调用风格的实现代码实战及其在Spark编程中的广泛运用

    今天学习了下scala中的链式调用风格的实现,在spark编程中,我们经常会看到如下一段代码: sc.textFile("hdfs://......").flatMap(_.spl ...

  8. Scala 深入浅出实战经典 第51讲：Scala中链式调用风格的实现代码实战及其在Spark中应用

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  9. Javascript链式调用案例

    jQuery用的就是链式调用.像一条连接一样调用方法. 链式调用的核心就是return this;,每个方法都返回对象本身. 下面是简单的模拟jQuery的代码, <script> win ...

随机推荐

  1. 如何使用Scala的ClassTag

    Scala官方文档中对于ClassTag的定义如下: ClassTag[T]保存着在运行时被JVM擦除的类型T的信息.当我们在运行时想获得被实例化的Array的类型信息的时候,这个特性会比较有用. 下 ...

  2. 【Uva1025 A Spy in the Metro】动态规划

    题目描述 某城市地铁是线性的,有n(2≤n≤50)个车站,从左到右编号1~n.有M1辆列车从第1站开始往右开,还有M2辆列车从第n站开始往左开.列车在相邻站台间所需的运行时间是固定的,因为所有列车的运 ...

  3. fiddler抓取手机模拟器数据

    引自:https://blog.csdn.net/lengdaochuqiao/article/details/88170522 1.下载最新版fiddler ,强烈建议在官网下载:https://w ...

  4. 【Java基础上】一、简述Java

    一.简述Java ​ Java是一种高级的面向对象的程序语言,在此处,不需要了解什么叫做面向对象,因为后面的文章中自然会谈到这方面的论述.那么,Java就是一个计算机的编程语言. 1.1 Java的历 ...

  5. Django的ORM如何执行group by 语句

    问题描述: 使用Django的ORM建立了如下Model: class Book(models.Model): name = models.CharField(max_length=300) page ...

  6. linux下利用JMX监控Tomcat

    利用JMX监控Tomcat,就是相当于部署在tomcat上的应用作为服务端,也就是被管理资源的对象.然后通过程序或者jconsole远程连接到该应用上来.远程连接需要服务器端提供ip和port.如果需 ...

  7. 蓝凌OA前台任意文件读取漏洞利用

    近期CNVD爆出漏洞编号:CNVD-2021-28277,首次公开日期为2021-04-15,蓝凌oa存在多个漏洞,攻击者可利用该漏洞获取服务器控制权.今天挑选一个蓝凌OA前台任意文件读取漏洞进行分析 ...

  8. Bugku-login1(SKCTF)(SQL约束攻击)

    原因 sql语句中insert和select对长度和空格的处理方式差异造成漏洞. select对参数后面的空格的处理方式是删除,insert只是取规定的最大长度的字符串. 逻辑 1.用 select ...

  9. small-spring 代码贡献者3个月，敢说精通Spring了，分享我的总结！

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.为什么手写Spring 这个与我们码农朝夕相处的 Spring,就像睡在你身边的媳妇,你知 ...

  10. elsa-core——1.Hello World:Console

    github上有一个开源的工作流项目elsa,elsa-core是core语言的版本,其文档因为是英文,因此会让很多人不想看,或者是看不下去,从这篇文章开始我将开始对elsa-core的文档翻译成英文 ...