深入理解 JavaScript 异步

前言

https://github.com/wangfupeng1988/js-async-tutorial

2014年秋季写完了《深入理解javascript原型和闭包系列》，已经帮助过很多人走出了 js 原型、作用域、闭包的困惑，至今仍能经常受到好评的留言。

很早之前我就总结了JS三座大山这个概念（虽然没有到处宣扬），前两座（原型、作用域）已经基本讲明白，而第三座（异步）也应该做一个总结。

于是，2017年初春，我花费大约一周的业余时间来对 JS 异步做一个完整的总结，和各位同学共勉共进步！

目录

part1 基础部分
什么是异步
异步和 event-loop
事件绑定算不算异步？

part2 jQuery的解决方案
jQuery-1.5 之后的 ajax
jQuery
deferred
jQuery
promise

part3 ES6-Promise
Promise 加入 ES6 标准
Promise
在 ES6 中的具体应用
对标一下
Promise/A+ 规范
Promise
真的取代 callback 了吗？
用 Q.js 库

part4 Generator
ES6 中的 Generator
Iterator
遍历器
Generator
的具体应用
Thunk 函数
Generator
与异步操作
koa
中使用 Generator
Generator
的本质是什么？是否取代了 callback

part5 async-await
ES7 中引入 async-await
如何在
nodejs 

v6.x

版本中使用 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的文章，觉得阮一峰大神是把它阐述的最清晰易懂的一个。