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方法，上一个的返回值，可以作为下一个的参数。
promise链式调用的应用的更多相关文章
- 使用Promise链式调用解决多个异步回调的问题
使用Promise链式调用解决多个异步回调的问题 比如我们平常经常遇到的一种情况: 网站中需要先获取用户名,然后再根据用户名去获取用户信息.这里获取用户名getUserName()和获取用户信息get ...
- Promise链式调用 终止或取消
Promise回调分两种方法,then成功,catch失败 let promise = new Promise(function(resolve, reject){ resolve('第一次成功') ...
- 中断或取消Promise链的可行方案
ES6标准引入的异步编程解决方案Promise,能够将层层嵌套的回调转化成扁平的Promise链式调用,优雅地解决了“回调地狱”的问题.当Promise链中抛出一个错误时,错误信息沿着链路向后传递,直 ...
- 如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用
1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...
- jquery中链式调用原理
(1).链式调用 $("#mybtn").css("width","100px") .css("height",&quo ...
- javascript方法链式调用和构造函数链式调用对比
先说一下方法链:B的实例从A继承了A中的同名方法,如果B的方法重载了A中的方法,B中的重载方法可能会调用A中的重载方法,这种方法称为方法链. 构造函数链:子类的构造函数B()有时需要调用父类的构造函数 ...
- 第51讲：Scala中链式调用风格的实现代码实战及其在Spark编程中的广泛运用
今天学习了下scala中的链式调用风格的实现,在spark编程中,我们经常会看到如下一段代码: sc.textFile("hdfs://......").flatMap(_.spl ...
- Scala 深入浅出实战经典 第51讲：Scala中链式调用风格的实现代码实战及其在Spark中应用
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- Javascript链式调用案例
jQuery用的就是链式调用.像一条连接一样调用方法. 链式调用的核心就是return this;,每个方法都返回对象本身. 下面是简单的模拟jQuery的代码, <script> win ...
随机推荐
- dos命令的学习
打开CMD的方式 开始+系统+命令提示符 Windows+R+输入CMD 在任意的文件夹下面,按住shift+点击鼠标右键,在此处打开命令行窗口 资源管理器的地址栏前面加上CMD路径 管理员方式运行: ...
- 使用宝塔配置laravel站点时，遇到open_basedir restriction in effect. 原因与解决方法
今天一位朋友在linux服务器部署thinkphp5的时候PHP报了这个错误,如下: Warning: require(): open_basedir restriction in effect. F ...
- go反射原理
go反射原理 本文基于go1.13.15 1.go汇编 1.1 基本语法 go采用plan9的汇编器完成汇编,有下面几个重要的伪寄存器 FP: Frame pointer: 局部变量访问 PC: Pr ...
- Python基础之读取ini文件
基本使用方法 第一步:准备一份INI文件.如test1.ini [ITEMS] item1=1 item2=2 item3=3 item4=4 [ITEM1] test1=aaa [ITEM2] te ...
- windows下python -m pip install --upgrade pip升级后报错的解决方法
前言: 笔者装某库的时候提示需要升级pip版本,就python -m pip install --upgrade pip默认升级了,结果升级之后只要输入pip就有报错(如下图),网上百度了很多解决方法 ...
- Hyper-V下Internal vSwitch的配置和Linux虚拟机的SSH连接
最近工作中要在Windows Server 2016/Hyper-V 10中运行Ubuntu16实例,需要制作出"即插即用"的镜像文件,也就是安装好后即可从外部SSH进去.之前我使 ...
- DevOps基础的认识与工具实践
什么是DevOps DevOps 强调的是高效组织团队之间如何通过自动化的工具协作和沟通来完成软件的生命周期管理,从而更快.更频繁地交付更稳定的软件 Devops 包含了敏捷开发,测试,运维 DevO ...
- 面试常见SQL中where和having的区别你确定你知道吗！
"Where" 是一个约束声明,使用Where来约束来之数据库的数据,Where是在结果返回之前起作用的,且Where中不能使用聚合函数. "Having" 是 ...
- 尝新体验ASP.NET Core 6预览版本中发布的最小Web API(minimal APIS)新特性
本文首发于<尝新体验ASP.NET Core 6预览版本中发布的最小Web API(minimal APIS)新特性> 概述 .NET开发者们大家好,我是Rector. 几天前(美国时间2 ...
- JavaScript学习07（jQuery）
jQuery 什么是JQuery jQuery 由 John Resig 于 2006 年创建.它旨在处理浏览器不兼容性并简化 HTML DOM 操作.事件处理.动画和 Ajax. 十多年来,jQue ...