前言
2014年秋季写完了《深入理解javascript原型和闭包系列》,已经帮助过很多人走出了 js 原型、作用域、闭包的困惑,至今仍能经常受到好评的留言。
很早之前我就总结了JS三座大山这个概念(虽然没有到处宣扬),前两座(原型、作用域)已经基本讲明白,而第三座(异步)也应该做一个总结。
于是,2017年初春,我花费大约一周的业余时间来对 JS 异步做一个完整的总结,和各位同学共勉共进步!
目录
part1 基础部分
part2 jQuery的解决方案
part3 ES6-Promise
part4 Generator
- ES6 中的 Generator
- Iterator 遍历器
- Generator 的具体应用
- Thunk 函数
- Generator 与异步操作
- koa 中使用 Generator
- Generator 的本质是什么?是否取代了 callback
part5 async-await
part6 总结
运行程序的说明
要求本地 node 在v6
或以上版本,然后执行以下命令下载代码并安装依赖的插件
$ cd ~
$ git clone git@github.com:wangfupeng1988/js-async-tutorial.git
$ cd js-async-tutorial
$ npm i
最后,本地可能需要启动一个静态服务器来运行页面,我使用http-server
插件
$ npm install http-server -g
$ cd js-async-tutorial
$ http-server -p 8881
然后浏览器访问http://localhost:8881/xxx/xxx.html
即可
相信经常使用ajax的前端小伙伴,都会遇到这样的困境:一个接口的参数会需要使用另一个接口获取。
年轻的前端可能会用同步去解决(笑~),因为我也这么干过,但是极度影响性能和用户体验。
正常的前端会把接口写在另一个接口的回调里。是这样不错,但是它增加了函数的嵌套深度也会造成一定的逻辑混乱。
也许有朋友会说,哪那么多毛病,解决问题不就好了吗?
但是,如果需要的是另外好几个接口的返回数据呢?这时候就会比较蛋疼了。这就是回调地狱!
当时依稀记得是使用了jQuery的 when .then方法去解决的。
直到遇见了Promise,它完美优雅的解决了回调地狱难题!
//创建一个Promise实例,获取数据。并把数据传递给处理函数resolve和reject。需要注意的是Promise在声明的时候就执行了。 var getUserInfo=new Promise(function(resolve,reject){ $.ajax({ type:"get", url:"index.aspx", success:function(data){ if(data.Status=="1"){ resolve(data.ResultJson)//在异步操作成功时调用 }else{ reject(data.ErrMsg);//在异步操作失败时调用 } } }); }) //另一个ajax Promise对象, var getDataList=new Promise(function(resolve,reject){ $.ajax({ type:"get", url:"index.aspx", success:function(data){ if(data.Status=="1"){ resolve(data.ResultJson)//在异步操作成功时调用 }else{ reject(data.ErrMsg);//在异步操作失败时调用 } } }); }) //Promise的方法then,catch方法 getUserInfo.then(function(ResultJson){ //通过拿到的数据渲染页面 }).catch(function(ErrMsg){ //获取数据失败时的处理逻辑 }) //Promise的all方法,等数组中的所有promise对象都完成执行 Promise.all([getUserInfo,getDataList]).then(function([ResultJson1,ResultJson2]){ //这里写等这两个ajax都成功返回数据才执行的业务逻辑 })
这样的代码分工非常明确,ajax就是拿数据的,.then .catch方法就是处理业务逻辑,代码异常清晰。
反正我用了几次之后是离不开它了,很好很强大。
如果你也想学的话推荐参看ECMAScript 6入门一书中讲解Promise的那一章。
我百度了很多Promise的文章,觉得阮一峰大神是把它阐述的最清晰易懂的一个。