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 ...
随机推荐
- NestJS WebSocket 开始使用
使用NestJs提供WebSocket服务. 本文会在新建项目的基础上增加2个类 Gateway 实现业务逻辑的地方 WebSocketAdapter WebSocket适配器 新建项目 新建一个项目 ...
- 程序向informix数据库插入text类型的中文乱码问题
部署应用的Linux服务器的编码格式为utf-8.但是数据库的编码格式为Gbk.所以导致的乱码.但是其他类型的数据中文并不乱码. 通过图片中修改编码格式,可以解决,导致的后果就是tomcat的日志输出 ...
- 《SEO实战密码》
一.搜索引擎 1.蜘蛛访问网站时都会先访问网站根目录下的 robots.txt 文件. 2.蜘蛛喜欢访问经常更新的页面. 3.离首页点击距离越近,页面权重越高. 4.使用"" + ...
- 【Maven实战技巧】「插件使用专题」Maven-Assembly插件实现自定义打包
前提概要 最近我们项目越来越多了,然后我就在想如何才能把基础服务的打包方式统一起来,并且可以实现按照我们的要求来生成,通过研究,我们通过使用maven的assembly插件完美的实现了该需求,爽爆了有 ...
- 【算法学习笔记】动态规划与数据结构的结合，在树上做DP
前置芝士:Here 本文是基于 OI wiki 上的文章加以修改完成,感谢社区的转载支持和其他方面的支持 树形 DP,即在树上进行的 DP.由于树固有的递归性质,树形 DP 一般都是递归进行的. 基础 ...
- 【问题记录】- 谷歌浏览器 Html生成PDF
起因: 由于项目需要实现将网页静默打印效果,那么直接使用浏览器打印功能无法达到静默打印效果. 浏览器打印都会弹出预览界面(如下图),无法达到静默打印. 解决方案: 谷歌浏览器提供了将html直接打印成 ...
- 在Linearlayout中新增ScrollView支持滚动
https://blog.csdn.net/wenzhi20102321/article/details/53491176 1.一般只需要在布局中加个ScrollView即可 2.如果布局中包含lis ...
- XCTF-ics-07(floatval函数特性+Linux目录结构特性)
直接进入到项目管理页面,给了三段源码. 第一段 <?php session_start(); if (!isset($_GET[page])) { show_source(__FILE__); ...
- Android面试大揭秘！从技术面被“虐”到征服CTO，全凭这份强到离谱的pdf
在笔者面试这一个月,看了不少文章,也刷了不少面试题,但真正有深度,适合4年及以上Android高工的内容少之又少 在面试准备阶段,笔者准备了三个月左右的时间,结合相关资料及源码,完成了一系列的深度学习 ...
- Vue 实现微信提示浏览器转跳功能
<template> <div class="main"> <div :class="show==true ? 'block':'block ...