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. 在NestJS 中添加对Stripe 的WebHook 验证

    在NestJS 中添加对Stripe 的WebHook 验证 背景介绍 Nest 是一个用于构建高效,可扩展的NodeJS 服务器端应用程序的框架.它使用渐进式JavaScript, 内置并完全支持T ...

  2. DRF使用JWT进行用户认证

    1. 首先需要安装第三方依赖包 pip install djangorestframework-jwt 2. 在Django的settings文件中 配置全局的JWT认证类 REST_FRAMEWOR ...

  3. [XIN算法应用]NOI2020美食家

    XIN(\(updated 2021.6.4\)) 对于很多很多的题目,发现自己并不会之后,往往会直接冲上一个XIN队算法,然而,这样 \(\huge{\text{鲁莽}}\) 的行为只能获得 TLE ...

  4. 一台电脑安装两个不同版本的MySQL

    背景: 本人电脑上已有mysql-8.0.12-winx64,并且可以使用.但由于工作需要,得使用mysql-5.5.59-winx64,已有mysql-5.5.59-winx64的解压好的安装包 参 ...

  5. 公有组件ShowCodeList实现原理之一一下拉框的实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 初探Node-red结合阿里云数据库，定时显示数据

    在最近的项目中,隔壁项目组推荐了一个很好的基于node.js开源IOT框架Node-Red,它的优点很明显,使用可视化编程的方式,实现了大部分需要在物联网领域的技术,而且能很好的对接各个云平台,快捷部 ...

  7. Joomla 3.4.5 反序列化漏洞（CVE-2015-8562）

    影响版本 Joomla 1.5.x, 2.x, and 3.x before 3.4.6 PHP 5.6 < 5.6.13, PHP 5.5 < 5.5.29 and PHP 5.4 &l ...

  8. noip模拟测试16

    这次考试,难度还是不小的,先说一下考试过程,首先看一遍题,觉得开题顺序1 3 2, 然后我就先打了第一题,我当时可能是受到之前做题的限制了,觉得他只能每次走一 格,也就是一个单位长度,但是实际上,他甚 ...

  9. Vue学习笔记（二）动态绑定、计算属性和事件监听

    目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...

  10. CF427C题解

    Description 有一张带点权有向图,你要在其中修建若干个检查站,使得对于每一个点 \(p\) ,都有 \(\geq 1\) 个检查站,满足: 存在一条从这个检查站出发到点 \(p\) 的路径: ...