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. Linux虚拟机与主机网络连接配置与文件传输

    网络配置 对于VMware虚拟机 1. 设置linux系统的网络配置,如下(NAT为默认配置,这里采用这一配置) 2. 主机中配置本地连接-属性-共享-勾选红框配置项,如下:     3.重启虚拟机. ...

  2. 第五篇--VS2017如何生成Dll文件

    参考资料: https://blog.csdn.net/qq_34097715/article/details/79540933 https://www.cnblogs.com/RascallySna ...

  3. 理清 UT、UTC、GMT和CST

    平时各种时间标准简写绕得不明不白,查一下整理在这里. IAT: International Atomic Time, 原子时.又称国际原子时,是一种通过原子钟得到的时间标准,原子钟是世界上已知最准确的 ...

  4. JUC学习笔记（三）

    JUC学习笔记(一)https://www.cnblogs.com/lm66/p/15118407.html JUC学习笔记(二)https://www.cnblogs.com/lm66/p/1511 ...

  5. MySQL 中删除的数据都去哪儿了？

    不知道大家有没有想过下面这件事? 我们平时调用 DELETE 在 MySQL 中删除的数据都去哪儿了? 这还用问吗?当然是被删除了啊 那么这里又有个新的问题了,如果在 InnoDB 下,多事务并发的情 ...

  6. Apache解析漏洞

    多解析特性 在Apache1.x,2.x中Apache 解析文件的规则是从右到左开始判断解析,如果后缀名为不可识别文件解析,就再往左判断.因此对于apache而言,一个test.php.qwea文件依 ...

  7. C++1-100之间 7的倍数 带7 打印 敲桌子

    1 // 1-100之间 7的倍数 带7 打印 敲桌子 2 #include <iostream> 3 using namespace std; 4 5 int main() 6 { 7 ...

  8. python自动化之(自动化测试报告)

    前言: 给予你们最关心的3步骤 什么是自动化测试报告?  答:在自动化测试过程中自动生成的测试报告 为什么要做自动生成测试报告? 答:真正的解放双手; 可以形成直观的测试结果; 给自己一个装X的机会; ...

  9. IntelliJ IDEA 中为Maven 配置阿里云镜像源

    idea中查看位置,应该都是一样的这个位置 在此位置下新建一个.xml文件 内容如下: <?xml version="1.0" encoding="UTF-8&qu ...

  10. 4 剑指Offer53-在排序数组中查找数字

    统计一个数字在排序数组中出现的次数. 示例 1: 输入: nums = [5,7,7,8,8,10], target = 8 输出: 2  示例 2: 输入: nums = [5,7,7,8,8,10 ...