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. Nacos 2.0源码分析-拦截器机制

    温馨提示: 本文内容基于个人学习Nacos 2.0.1版本代码总结而来,因个人理解差异,不保证完全正确.如有理解错误之处欢迎各位拍砖指正,相互学习:转载请注明出处. Nacos服务端在处理健康检查和心 ...

  2. js之 foreach, map, every, some

    js中array有四个方法 foreach, map, every, some,其使用各有倾向. 关注点一:foreach 和 map 无法跳出循环,每个元素均执行 foreach 和 map 无法跳 ...

  3. odoo controllers 中type="Json" 或type="http"

    服务端接收参考: # 导包 from odoo import http class HttpRequest(http.Controller): @http.route('/url', type='js ...

  4. C++第五十二篇 -- 多线程之消息传递

    主线程向子线程发送消息 参考链接:https://www.cnblogs.com/ranjiewen/p/5729539.html 1. 创建线程语句 HANDLE hThread; DWORD dw ...

  5. 构建后端第4篇之---spring 源码阅读构建环境

    解决 IDEA 创建 Gradle 项目没有src目录问题 in new model named zyt-study   root dir there are  a build.gradle plug ...

  6. 【Web动画】科技感十足的暗黑字符雨动画

    本文将使用纯 CSS,带大家一步一步实现一个这样的科幻字符跳动背景动画.类似于这样的字符雨动画: 或者是类似于这样的: 运用在一些类似科技主题的背景之上,非常的添彩. 文字的竖排 首先第一步,就是需要 ...

  7. Java 中节省 90% 时间的常用的工具类

    前言 你们有木有喜欢看代码的领导啊,我的领导就喜欢看我写的代码,有事没事就喜欢跟我探讨怎么写才最好,哈哈哈...挺好. 今天我们就一起来看看可以节省 90% 的加班时间的第三方开源库吧,第一个介绍的必 ...

  8. Centos8 Nginx 开机自启配

    第一步:创建 service文件 vim /lib/systemd/system/nginx.service /lib 与 /usr/lib 我这里配置时是一样的,在那个文件夹配置都可以 第二步:编写 ...

  9. Java流程控制04——Switch选择结构

    switch 多选择结构 switch case 语句判断一个变量与一系列值中某个值是否相等,每个支撑位一个分支. switch语句中的变量类型可以是: byte short int 或者 char ...

  10. tkinter 基础教程

    目录 介绍 模块 导入方式 API 使用 主窗口 运行窗口 组件列表介绍 Label 标签 Button 按钮 Options 属性选项 文本框 Entry 单行文本框 Text 多行文本框 文本框属 ...