越来越发现JavaScript这个语言相当的不错,之前还一直以为就跟HTML,CSS一样差不多(实际上这两者的门道也不浅)。随着AJAX,ES6,甚至ES7新标准新特性,很多玩法加入进来,再加上node的推动下JavaScript的生态也越来越好,多学习一下人很有裨益。

1 最原始的异步编程
其实就是搞一个嵌套一类的东西,非常的oldschool,用setTimeOut来举例子(工作中可以将其替换成ajax网络请求,获取到结果执行下一步的)
比如弄一个简单的例子,一方面来证明是异步的,复制到浏览器的conclose里即可。

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的请求返回结果。。。。,很可能是下面的情况

setTimeout(
  () => {
    console.log("ZP很帅 +"+ 1);
    setTimeout(
      () => {
        console.log("ZP很帅 +" +2);
        setTimeout(
          () => {
            console.log("ZP很帅 +"+ 3);
          },
          1000
        );
      },
      1000
    );
  },
  1000
)

但是这个东西看起来就知道不够优雅,怎么样写得更简洁呢,可以试着分离一下。我在别的大佬的JS里经常会遇到各种XXXXCallBack,借鉴一下人家的分离思想。

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于是代码更难改。)

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上找到

(参数1, 参数2, …, 参数N) => { 函数声明 }

//相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }
(参数1, 参数2, …, 参数N) => 表达式(单一)

// 当只有一个参数时,圆括号是可选的:
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号。
() => {函数声明}

我的改写可能让你大概了解一点,异步函数有好处也有坏处,但是它确实能让代码简短。

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的异步结果出来之后就再继续往下执行。

var run = async steps => {
  await wait(1000);
  console.log(steps);
}

4 用生成器实现协程
协程是在线程里面,所以是共享的线程资源,甚至连线程间切换消耗资源都省了。协程 Coroutine,一种协作多任务式多任务的,任务挂起与恢复实现任务间切换。

知道go的人肯定对协程有听过(然而我目前也只是听过,看过资料了解过的程度。)JavaScript是怎么实现协程,并没有什么关键词。于是要通过生成器Generator来实现这个玩意,在JavaScript的“可迭代协议”和“迭代器协议”,function*和yield关键字配合下就完成了。

function*是生成生成器对象的,yield是用来在生成器的next()方法执行时中断位置返回右侧表达式的值。

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上解释还挺清楚的。

熊四火老师的专栏关于这个异步写的比较好建议多看几遍。