ES6 promise的应用
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewprot" content="width=device-width,initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="id=edge" />
<title>对比Promise跟回调在流程控制上的区别</title>
<style>
#el{
width: 100px;
background: green;
transition: all 1s;
color: white;
line-height: 100px;
text-align: center;
font-size: 40px;
}
</style>
</head>
<body> <div id="el">哦</div>
<button id="btn">开始</button>
<script src="js/main.js"></script>
</body>
</html>
1、es5 使用回调函数
function moveTo(el,x,y,cb){ //四个参数分别为移动的元素、移动到对应的横纵坐标点，以及要移动完之后要调用的回调函数
//cs3动画
el.style.transform = `translate( ${x}px, ${y}px)`; //产生位移
setTimeout(function(){
cb && cb();
},1000);
}
let el = document.querySelector('div');
document.querySelector('button').addEventListener('click', e => {
moveTo(el,100,100,function(){
moveTo(el,200,200,function(){
moveTo(el,100,300,function(){
moveTo(el,130,20,function(){
moveTo(el,0,0,function(){
console.log('移动结束！')
})
})
})
})
})
});
2、使用promise
//使用promise
function moveTo(el,x,y){
return new Promise(resolve => {
el.style.transform = `translate(${x}px,${y}px)`;
setTimeout(function(){
resolve(); //调用resolve()就是调用下面.then中的匿名函数
},1000);
});
}
let el = document.querySelector('div');
document.querySelector('button').addEventListener('click',e =>{
moveTo(el,100,100)
.then(function(){ //then方法接收一个参数，即匿名函数，对应到moveTp中的就是resolve()
console.log('第一次移动');
return moveTo(el,200,200);
})
/*
//跟这样写没区别
// .then(function(){
// console.log('第二次移动');
// console.log('第三次移动');
// })
*/
.then(function(){
console.log('第二次移动');
})
.then(function(){
console.log('第三次移动');
});
});
then方法中也可以直接在后面继续调用then方法，如果then方法返回一个Promise的实例，那下一个then就会以上一个返回的Promise的实例去执行，否则可以理解为一个什么都没干的Promise，只是往下走而已。把它们放到一个then方法里是一样的，只不过在代码很多的时候把它们分到两个then方法里可以更清晰一些。 //实例化Promise构造函数时，传递一个函数，该函数有两个参数：resolve和reject(也是两个函数，名字可以随便取，就是两个函数，第一个函数是用来处理成功时的回调函数，第二个函数是用来处理失败时的回调函数)
//实例化后的Promise对象，具有then方法，then方法用来指定上述两个函数，resolve和reject；
//then()方法接受两个参数，1.第一个参数是状态切换为成功时的回调,
2.第二个参数是状态切换为失败时的回调。如果在then中不添加参数，那么就相当于没有调用任何回调函数 1、当只有一个参数的时候， 箭头函数的语法规定，可以省略括号直接写参数， 所以这里的resolve => 就等于（resolve） => 这种写法
2、这里的e代表事件对象， 可以打印一下查看结果
http://img.mukewang.com/climg/5d8871ed09d8910010580249.jpg
http://img.mukewang.com/climg/5d8871f60969c96a09090060.jpg
then方法中的function对应到promise中的resolve，调用resolve，就会调用then中的参数function：
Promise的构造函数接收一个参数，这个参数是一个函数，此函数可以传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数；
如果参数只有一个resolve的话，执行的是resolve方法，但是有时候参数是两个resolve，reject，这两个方法是Promise自带的。
主要看执行resolve方法，还是执行reject方法：
Promise的执行流程：
在return里的resolve，表示操作执行成功后的回调函数，意思是当函数加载成功才调用参数resolve在执行moveTo函数。
即当moveTo函数加载成功之后，返回一个promise实例。实例中调用resolve()，这时候再去执行moveTo函数中then方法。
ES6 promise的应用的更多相关文章
- 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise
Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise,但是略有不同.不过它们的作用可以简单的用两句话来描述 Deffered 触发 resolve ...
- ES6 Promise 接口
构造函数 new Promise(function(resolve, reject){}); 构造函数接受一个函数(executor)作为参数,该函数在返回 Promise 实例之前被调用.函数的两个 ...
- Es6 Promise 用法详解
Promise是什么?? 打印出来看看 console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...
- ES6 Promise 全面总结
转载:点击查看原文 ES6 Promise对象 ES6中,新增了Promise对象,它主要用于处理异步回调代码,让代码不至于陷入回调嵌套的死路中. @-v-@ 1. Promise本质 Promise ...
- ES6 Promise 异步操作
最近越来越喜欢与大家进行资源分享了,并且及时的同步到自己的园子内,为什么呢? 一.小插曲(气氛搞起) 在上个月末,由于领导的高度重视(haha,这个高度是有多高呢,185就好了),走进了公司骨干员工的 ...
- 微信小程序Http高级封装 es6 promise
公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是 数据请求! 看了下小程序的请求方式大概和a ...
- 解析ES6 Promise
ES6 Promise 概念之类的,大概读者都应该有所知道,接下来我们直入终点. 先让我们来看看什么是Promise吧,他是一个object,类,arry,function? 首先,学习它的时候应该讲 ...
- jquery Promise和ES6 Promise的区别
1. Deferred对象有resolve和reject方法,可以直接修改状态 jquery用Deferred实现了Promise规范,Deferred与ES6 Promise的最大区别是: Defe ...
- ES6 Promise对象then方法链式调用
then()方法的作用是Promise实例添加解决(fulfillment)和拒绝(rejection)状态的回调函数.then()方法会返回一个新的Promise实例,所以then()方法后面可以继 ...
- ES6 Promise(2)
Promise的兴起,是因为异步方法调用中,往往会出现回调函数一环扣一环的情况.这种情况导致了回调金字塔的出现.不仅代码写起来费劲不美观,而且问题复杂的时候,阅读代码的人也难以理解. db.save( ...
随机推荐
- 微信小程序云开发-云存储-下载并打开文件文件（word/excel/ppt/pdf）
一.wxml文件 1.写文本框,用来获取文件链接. 2.按钮,点击下载文件 <!-- 下载文件(word/excel/ppt/pdf等) --> <view class=" ...
- OpenFaaS实战之三：Java函数
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- 关于Vmware-Tools的安装问题：Please re-run this program as the super user. Execution aborted.
点击VM-Install VMware Tools在桌面上出现一张光盘包含3个文件,分别为manifest.txt:Vmware-tools-版本号.rpm和Vmware-tools-版本号.tar. ...
- npm 安装、卸载模块
npm安装模块 [npm install xxx]利用 npm 安装xxx模块到当前命令行所在目录:[npm install -g xxx]利用npm安装全局模块xxx:本地安装时将模块写入packa ...
- PGSQL存储过程学习
一.存储过程定义: 存储过程(Stored Procedure)是在大型数据库系统中,一组为了完成特定功能的SQL 语句集,它存储在数据库中,一次编译后永久有效,用户通过指定存储过程的名字并给出参 ...
- python中的生成器，迭代器及列表生成式
列表生成器: 即List Comprehensions. 在python中,可通过内置的强大有简单的生成式来创建列表.例如创建一个1到10的列表list [1, 2, 3, 4, 5, 6, 7, ...
- (6java)计算机语言发展史
(6java)计算机语言发展史 机器语言: 程序是0和1的组合,比如:0000.0001.1100110 汇编语言: 程序比机器语言好理解一点点 高级语言: 比较适合老美,苦了英语差的孩子们了,哈哈. ...
- noip模拟测试22
考试总结:这次考试题,有好多部分分,导致了我在考试过程中一心想拿到这些部分分,对于正解没有留出时间进行思考,这是一个教训,在以后的考试中我一定要留出足够的思考时间,不要被部分分限制.还有,我的部分分也 ...
- AndroidStudio 插件总结
工作中常用的插件备注如下: Alibaba Java Coding GuidelinesCheckStyle-IDEAAndroid Drawable PreviewGsonFormatTransla ...
- pytest框架fixture的使用
fixture可以当做参数传入 定义fixture跟定义普通函数差不多,唯一区别就是在函数上加个装饰器@pytest.fixture(),fixture命名不要以test开头,跟用例区分开.fixtu ...