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 ...
随机推荐
- Centos 7 配置阿里云 yum 源
Centos 7 配置阿里云 yum 源 一. 禁用 yum 插件 fastestmirror 修改插件的配置文件 cp /etc/yum/pluginconf.d/fastestmirror.con ...
- 【排序+模拟】谁拿了最多奖学金 luogu-1051
题目描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 院士奖学金,每人$ 8000 $元,期末平均成绩高于\(80\)分(\(>80\)),并且在本 ...
- python 环境遇到的报错
pipenv install -r requirements.txt 时遇到错误: `Command "python setup.py egg_info" failed with ...
- ASP.NET Datalist制作显示效果和img的数据库存储
1. 具体实现效果如下图: 2.首先使用datalist控件编辑模板,在属性面板选择RepeatColumns="3" RepeatDirection="Horizont ...
- DC-8靶机
仅供个人娱乐 靶机信息 下载地址:http://www.five86.com/downloads/DC-8.zip 一.主机扫描 二.信息收集 http://192.168.17.135/robots ...
- 论文笔记：（2021CVPR）PAConv: Position Adaptive Convolution with Dynamic Kernel Assembling on Point Clouds
目录 摘要 1.引言 2.相关工作 将点云映射到常规二维或三维栅格(体素) 基于MLPs的点表示学习 基于点卷积的点表示学习 动态卷积和条件卷积 3.方法 3.1 回顾 3.2 动态内核组装 Weig ...
- SQL语句（一）基础查询与过滤数据
目录 一.数据库测试表 二.基础查询 1. 获得需要的记录的特定字段 2. 查询常量值 3. 查询表达式 4. 查询函数 5. 起别名 6. 去重 7. CONCAT函数的简单使用 三.过滤数据 大纲 ...
- 那些 Unix 命令替代品们「GitHub 热点速览 v.21.32」
作者:HelloGitHub-小鱼干 好用的 Unix 命令替代工具能让你事半功倍,例如,bat 便是个带着高亮特性的加强版 cat,就像你用了 oh my zsh 之后便会感受到它的强大.同样好用的 ...
- ContentObserver 内容观察者作用及特点
eg: 1.定义Uri public static Uri KEY_BROWSER_URI = Uri.parse("content://com.android.browser.provid ...
- Java面向对象05——创建对象内存分析