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( ...
随机推荐
- Java中lombok @Builder注解使用详解（十八）
Lombok大家都知道,在使用POJO过程中,它给我们带来了很多便利,省下大量写get.set方法.构造器.equal.toString方法的时间.除此之外,通过@Builder注解,lombok还可 ...
- 深入源码理解Spring整合MyBatis原理
写在前面 聊一聊MyBatis的核心概念.Spring相关的核心内容,主要结合源码理解Spring是如何整合MyBatis的.(结合右侧目录了解吧) MyBatis相关核心概念粗略回顾 SqlSess ...
- 使用adb如何批量给设备安装apk
win系统 1.首先我们需要在本地建一个文件夹apks,然后把所要安装的apk放进去 2.打开dos窗口使用for循环进行安装即可(前提你的电脑已经连接上了设备,输入adb devices可查看) f ...
- Python脚本：删除文件夹下的重复图片，实现图片去重
近期在整理相册的时候,发现相册中有许多重复图片,人工一张张筛查删除太枯燥,便写下这个脚本,用于删除文件夹下重复的图片. 第一部分:判断两张图片是否相同 要查找重复的图片,必然绕不开判断两张图片是否相同 ...
- GhostScript 沙箱绕过（命令执行）漏洞（CVE-2018-16509）
影响范围: Ghostscript 9.24之前版本 poc地址 https://github.com/vulhub/vulhub/blob/master/ghostscript/CVE-2018-1 ...
- 🔥 LeetCode 热题 HOT 100（31-40）
75. 颜色分类 思路:将 2 往后放,0 往前放,剩余的1自然就放好了. 使用双指针:left.right 分别指向待插入的 0 和 2 的位置,初始 left 指向数组头,right 指向数组尾部 ...
- user-agent随笔
常用的user-agent: 一.pc端的user-agent汇总,各大浏览器 1.safari 5.1 – MAC Mozilla/5.0 (Macintosh; U; Intel Mac OS X ...
- PHP构造函数__construct()
(!注意,__construct()前的"__"是两个"_",也就是"_ _") 在PHP5.0后的版本,允许开发者设定一个构造函数,来初始 ...
- Salesforce Integration 概览(七) Data Virtualization数据可视化
本篇参考:https://resources.docs.salesforce.com/sfdc/pdf/integration_patterns_and_practices.pdf Salesforc ...
- CYPEESS USB3.0程序解读之---同步FIFO(slaveFifoSync)
上一篇文章解读了CYPRESS FX3的GPIO的操作过程,下面解读同步FIFO的一个例子(slaveFifoSync). *生产者,消费者. 1.首先看DMA的回调函数(cyu3dma.h): ty ...