越来越发现JavaScript这个语言相当的不错，之前还一直以为就跟HTML，CSS一样差不多（实际上这两者的门道也不浅）。随着AJAX，ES6，甚至ES7新标准新特性，很多玩法加入进来，再加上node的推动下JavaScript的生态也越来越好，多学习一下人很有裨益。
（题外插一句，这个简书貌似没有支持MarkDown，光靠编辑器这几个功能可能支持得不够，还有就是代码段也没有吗。）
1 最原始的异步编程
其实就是搞一个嵌套一类的东西，非常的oldschool，用setTimeOut来举例子（工作中可以将其替换成ajax网络请求，获取到结果执行下一步的）
比如弄一个简单的例子，一方面来证明是异步的，复制到浏览器的conclose里即可。
```javascript
function a (){
console.log("我是a我不是异步代码")
setTimeout(
function(){console.log("我是a的异步代码")}
,1000)
}
function b (){
console.log("我是b我不是异步代码")
setTimeout(
function(){console.log("我是b的异步代码")}
,1000)
}
a()
b()
```
看到a异步代码永远是在b的非异步代码后面执行，无论你怎么设置延时的定时器时间哪怕是设置为0，而且b的异步代码也不会跑在b的前面。同样作为异步代码他会在满足条件时才会触发，但是问题来了我要是好几层怎么办，A依赖于B的请求返回结果，B依赖于C的请求返回结果。。。。，很可能是下面的情况
```javascript
setTimeout(
() => {
console.log("ZP很帅 +"+ 1);
setTimeout(
() => {
console.log("ZP很帅 +" +2);
setTimeout(
() => {
console.log("ZP很帅 +"+ 3);
},
1000
);
},
1000
);
},
1000
)
```
但是这个东西看起来就知道不够优雅，怎么样写得更简洁呢，可以试着分离一下。我在别的大佬的JS里经常会遇到各种XXXXCallBack，借鉴一下人家的分离思想。
```javascript
var run = (steps, callback) => {
setTimeout(
() => {
console.log("张鹏真的很帅 +" +steps);
callback();
},
1000
);
};
run(1, () => {
run(2, () => {
run(3, () => {});
});
});
```
其实已经很不错了，因为在JS里面函数也可以作为参数传参进来这个特性，刚开始这个我这个弯没转过来浪费了不少时间。
2 ES6新特性 promise
其实做到分离，还是会出现嵌套的问题对于这种嵌套的代码还有个称呼，“厄运金字塔”（其实挺贴切的想要得到你的结果从塔顶到塔尖，这种代码改起来最蛋疼七扭八歪的。）
于是ES6提供了个原生支持叫做promise来解决，他的构造方法接受一个函数，并且这个函数接受resolve和reject这两个参数。前者未来成功时调用后者未来失败时调用（其实第一个厄运金字塔代码类型callBack也可以分为成功的successCallBack和失败的failCallBack于是代码更难改。）
```javascript
var run = steps =>
() =>
new Promise((resolve, reject) => {
setTimeout(
() => {
console.log(steps);
resolve(); // 一秒后的未来执行成功，需要调用
},
1000
);
});
Promise.resolve()
.then(run(1))
.then(run(2))
.then(run(3));
```
当然前半段代码看不明白也没关系，箭头函数 =>这个让代码变简洁是个不错的东西，当然也提高了阅读的门槛，下面是我从MDN上找到
```javascript
(参数1, 参数2, …, 参数N) => { 函数声明 }
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
(参数1, 参数2, …, 参数N) => 表达式（单一）
// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}
// 没有参数的函数应该写成一对圆括号。
() => {函数声明}
```
我的改写可能让你大概了解一点，异步函数有好处也有坏处，但是它确实能让代码简短。
```javascript
var run = function run (steps){
new Primise(function(resolve,reject){
setTimeout({
console.log(steps);
resolve(function(steps));
},1000)
})
}
Promise.resolve()
.then(run(1))
.then(run(2))
.then(run(3));
```
是不是就没有嵌套了，最起码第一眼看上去很像同步代码，直观的链式调用。
3 ES7的await和async语法糖
async标记函数为异步函数，await表示他后面要返回为一个Promise对象，在这个promise的异步结果出来之后就再继续往下执行。
```javascript
var run = async steps => {
await wait(1000);
console.log(steps);
}
```
4 用生成器实现协程
协程是在线程里面，所以是共享的线程资源，甚至连线程间切换消耗资源都省了。协程 Coroutine，一种协作多任务式多任务的，任务挂起与恢复实现任务间切换。
知道go的人肯定对协程有听过（然而我目前也只是听过，看过资料了解过的程度。）JavaScript是怎么实现协程，并没有什么关键词。于是要通过生成器Generator来实现这个玩意，在JavaScript的“可迭代协议”和“迭代器协议”，function*和yield关键字配合下就完成了。
function*是生成生成器对象的，yield是用来在生成器的next()方法执行时中断位置返回右侧表达式的值。
```javascript
function* IdGenerator() {
let index = 1;
while (true)
yield index++;
}
var idGenerator = IdGenerator();
console.log(idGenerator.next());
console.log(idGenerator.next());
```
5 异步异常
其实异步代码异常是一个问题，现实中涉及到请求的尤其是这样很可能是两套逻辑再嵌套的那种。
原始的两种callback,promise有resolve和reject两种，await，async也有对应的将结果解析出来，生成器没怎么细了解过，但是MDN上解释还挺清楚的。
熊四火老师的专栏关于这个异步写的比较好建议多看几遍。
