同步与异步
- 通常，代码是由上而下依次执行的。如果有多个任务，就必须排队，前一个任务完成，后一个任务才能执行。这种连续的执行模式就叫做同步。
a();
b();
c();
复制代码
上面代码中，a、b、c是三个不同的函数，每个函数都是一个不相关的任务。在同步模式会先执行 a 任务，再执行 b 任务，最后执行 c 任务。当b任务是一个耗时很长的请求时，而c任务是展现新页面时，就会导致网页卡顿。
- 所谓异步，就是一个任务不是连续完成的。比如，有一个读取文件处理的任务，任务的第一段的向操作系统发出请求，要求读取文件，然后程序执行其他任务，等到操作系统返回文件，再去处理文件。这种不连续的执行模式就叫做异步。
a();
ajax('url',(b)=>{
});
c();
复制代码
上面代码中，就是将b任务分成了两部分。一部分立即执行，另一部分再请求回来后执行。也就解决了上面的问题。
总结： 同步就是大家排队工作，异步就是大家同时工作。
异步的解决方案
1、CallBack
CallBack，即回调函数，回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。即异步操作执行完成后触发执行的函数。
$.get('url',callback);
复制代码
回调可以完成异步操作，但用过 jquery 的 PE 都对下面的代码折磨过。
$.ajax({
url:"type",
data:1,
success:function(a){
url:"list",
data:a,
success:function(b){
$.ajax({
url:"content",
data:b,
success:function(c){
console.log(c);
}
})
}
}
})
复制代码
上面代码就是传说中的回调金字塔，又叫回调地狱。这里还只是单纯的嵌套代码，如若再加上业务代码，代码可读性可想而知。自己开发起来还好，如果这是别人的代码，你要改其中一部分足以让人疯掉。
2、事件发布订阅
我们想读取两个文件时,希望这两个文件都被读取完后，拿到结果。我们可以通过 node 中的 EventEmitter 类来实现，它有两个核心方法，一个是 on（表示注册监听事件），一个是emit（表示发射事件）。
let fs=require('fs');
let EventEmitter=require('event');
let eve=new EventEmitter();
let arr=[];
eve.on('ready',function(d){
arr.push(d);
if(arr.length==2){
console.log(arr);
}
});
fs.readFile('./a.txt','utf8',function(err,data){
eve.emit('ready',data);
});
fs.readFile('./b.txt','utf8',function(err,data){
eve.emit('ready',data);
});
复制代码
请求 a.txt 和 b.txt 文件数据，当成功后发布ready事件。on 订阅了 ready 事件，当监听到触发的时候，on 方法执行。
哨兵变量
let fs=require('fs');
function after(times,callback){
let arr=[];
return function(d){
arr.push(d);
if(arr.length==times){
callback(arr);
}
}
}
let out=after(2,function(data){
console.log(data);
})
fs.readFile('./a.txt','utf8',function(err,data){
out(data);
});
fs.readFile('./b.txt','utf8',function(err,data){
out(data);
});
复制代码
上面代码 after 方法执行时传入的 2 相当于一个哨兵变量，需要读取几个文件的数据就传几。将需要读取的文件数量，和读取全部文件成功后的方法作为回调函数传入 after。out 为 after 执行后返回的函数，每次获取文件成功后执行 out 方法可以后去到最终全部文件的数据。
不使用回调地狱遇到的问题是：不知道读取文件的函数什么时候执行完。只有当全部读取完成后才能执行需要文件数据的方法。
3、Generator函数
Generator 函数要用*号来标识，yield 关键字表示暂停执行的标记。Generator 函数是一个状态机，封装了多个内部状态。调用一次 next 就会继续向下执行，返回的结果是一个迭代器，所以 Generator 函数还是一个遍历器对象生成函数。
function* read(){
let a=yield '123';
console.log(a);
let b=yield 4;
console.log(b);
}
let it = read();
console.log(it.next('321'));
console.log(it.next(1));
console.log(it.next(2));
console.log(it.next(3));
复制代码
上面代码可以看出，调用 Generator 函数后，返回的不是函数运行的结果，而是一个指向内部状态的指针对象，也就是遍历器对象。必须调用遍历器对象的 next 方法，让指针移动的下一个状态。内部指针就会从函数开始或上次定下来的地方开始执行，直到遇到下一个 yield 语句或 return 语句为止。value 属性表示当前的内部状态值，是 yield 语句后面那个表达值；done 属性是一个布尔值，表示是否遍历结束。
4、Promise
在 JavaScript 的异步发展史中，出现了一系列解决 callback 弊端的库，而 promise 成为了胜者，并成功地被加入了ES6标准。Promise 函数接受一个函数作为参数，该函数有两个参数 resolve 和 reject。promise 就像一个中介，而它只返回可信的信息给 callback,所以 callback 一定会被异步调用，且只会被调用一次。
let p=new Promise((resolve,reject)=>{
if(){
resolve(value);
}else{
reject(err);
}
});
p.then((value)=>{
},(err)=>{
})
复制代码
这样 Promise 就解决了回调地狱的问题，比如我们连续读取多个文件时，写法如下：
let fs=require('fs');
function read(url){
return new Promise((resolve,reject)=>{
fs.readFile(url,'utf8',function(err,data){
if(err) reject(err);
resolve(data);
})
}
}
read('a.txt').then((data)=>{
console.log(data);
}).then(()=>{
return read('b.txt');
}).then((data)=>{
console.log(data);
}).catch((err)=>{
console.log(err);
})
复制代码
如此不断的返回一个新的 Promise，这种不断的链式调用，就摆脱了callback回调地狱的问题和异步代码非线性执行的问题。
Promise 还解决了 callback 只能捕获当前错误异常。Promise 和 callback 不同，Promise 代理着所有的 callback 的报错，可以由 Promise 统一处理。所以，可以通过catch来捕获之前未捕获的异常。
Promise解决了callback的回调地狱问题，但Promise并没有摆脱callback。所以，有没有更好的写法呢？
5、Async Await
async函数是ES7中的一个新特性，它结合了Promise，让我们摆脱callback的束缚，直接用类同步的线性方式写异步函数，使得异步操作变得更加方便。
let fs=require('fs');
function read(url){
return new Promise((resolve,reject)=>{
fs.readFile(url,'utf8',function(err,data){
if(err) reject(err);
resolve(data);
})
}
}
async function r(){
let a=await read('a.txt');
let b=await read('b.txt');
return a+b;
}
r().then((data)=>{
console.log(data);
});
复制代码
至此，异步的 await 函数已经可以让我们满意。目前使用 Babel 已经支持 ES7 异步函数的转码了，大家可以在自己的项目中开始尝试。以后会不会出现更优秀的方案？以我们广大程序群体的创造力，相信一定会有的。
JavaScript异步调用的发展历程就到这里了，如果您觉得文章有用，可以打赏个咖啡钱(⊙﹏⊙)！
