新手学习promise踩的坑
来源:互联网 发布:js实现局部刷新div 编辑:程序博客网 时间:2024/06/05 02:59
先看一段promise实例的代码,猜想一下执行结果
function getPromise(func,delay){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ console.log(new Date().getTime()); func(); resolve(delay); },delay) })}function func1(){ console.log("func1");}function func2(){ console.log("func2");}function func3(){ console.log("func3");}console.log(new Date().getTime());getPromise(func1,5000) .then((x)=>{ getPromise(func2,7000); }) .then((x)=>{ getPromise(func3,5000); })console.log("haha");
执行结果如图所示:
执行结果是不是跟你预想的一致呢?如果一致您就没必要看下去了,如果不一致,您就可以跟随博主一起学习下promise了~
博主写这个例子的时候预期是希望先打印func1,接着是func2,最后是func3,因为promise可以实现异步嘛,既然输出结果跟预期不一致,那就仔细理解一下promise的原理吧
ES6中说:then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。采用链式的then,可以指定一组按照次序调用的回调函数。这时,前一个回调函数,有可能返回的还是一个Promise对象(即有异步操作),这时后一个回调函数,就会等待该Promise对象的状态发生变化,才会被调用。
回顾上述代码,then方法中并没有显示调用return,即函数执行完并没有返回新的promise对象,所以第二个then方法并不会等待第一个then方法执行结束才执行,而是在第一次调用getPromise方法resolve后就开始执行了,所以出现了如上的结果,既然知道原因了,那如何修改代码实现预期效果呢?
- 显示调用return
getPromise(func1,5000) .then((x)=>{ return getPromise(func2,7000); }) .then((x)=>{ return getPromise(func3,5000); })
- 通过箭头函数直接返回(当箭头函数里面只有一条语句的时候可以把函数的中括号去掉然后返回值就是这条语句的返回值)
getPromise(func1,5000) .then(()=>getPromise(func2,7000)) .then(()=>getPromise(func3,5000))
现在执行结果如下所示:
查找promise相关资料时发现一个很好的博客,建议新手好好看看:http://efe.baidu.com/blog/promises-anti-pattern/
阅读全文
0 0
- 新手学习promise踩的坑
- JS新手——十分好玩的promise初级
- 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise
- 用Promise-A+规范来复盘使用Promise时踩的一个小坑
- 学习Promise
- promise学习
- promise学习
- ES6 Promise对象的学习笔记
- Promise 的含义(ES6 学习札记)
- $.Deferred()的promise()方法-学习笔记
- React Native 中的promise对象的踩坑之旅
- js Promise学习
- promise对象学习
- 学习 ES6 Promise
- 使用Promise解决多层异步调用的简单学习
- ES6 原生promise 与 Q的比较学习
- 我的前端进阶学习(二)—— promise
- 我的前端进阶学习(二)—— promise
- Xpath定位的常用方法
- 面试官送给准程序员的一些建议!
- H5实训课笔记(二)
- Jquery LigerUI-表格的使用
- STM32+CC1101 低功耗2
- 新手学习promise踩的坑
- Mac Python服务器搭建遇到的问题
- Python time strftime()方法
- 图像处理(四):边缘检测(二):sobel和canny
- excel中使用VBA将单元格的内容转为多行
- idea报错:……are only available on JDK 1.5 and higher
- java并发编程(一)-从入门到吐血
- 五、list和tuple
- 宏观理解RESTful架构