Javascript最开始是用于浏览器中的前端编程语言。Javascript是单线程的，为了能及时响应用户操作，javascript对耗时操作（如Ajax请求、本地文件读取等)的处理是异步进行的，也即是所谓的异步编程。除了快速响应用户操作之外，另外一个让javascript采用异步方式的原因是，程序无法预知用户会进行哪些操作。比如说程序无法提前知道用户是点“取消”按钮还是“确定”按钮。所以，Javascript采用了事件注册的方式来处理这个问题。在程序编写时，可以给用户点击“取消”按钮和“确认”按钮注册不同的回调函数，这样当用户点击不同的按钮时，不同的回调函数会被执行。本文从回调函数开始，介绍了Promise、async/await几种Javascript主要的异步编程方式。
异步编程和回调函数
无论是Ajax请求，还是事件处理，Javascript都是通过回调函数来完成的。谈及异步编程和回调函数，可以回想一下操作系统中的中断及中断处理程序。由于CPU的速度比外设快出许多，为了提高CPU的处理效率，计算机系统引入了中断的概念，外设在读写数据的时候，CPU可以忙别的事情，等到外设读写完数据后，会给CPU发一个中断信号，CPU就可以来执行已经注册好的、相应的中断处理程序。Javascript中的回调函数和中断处理程序都是类似的原理。
先来看一个异步的例子：
console.log("Start...");
setTimeout(()=>{
console.log("in progress");
}, 2000);
console.log("End...");
如果是同步的话，输出的顺序应该是：
Start...
in progress
End...
然而真实的输出结果却是这样的：
Start...
End...
in progress
原因在于setTimeout中的第一个参数，箭头函数(即上文所说的回调函数)是异步执行的。setTimeout相当于注册一个回调函数，该回调函数在2000毫秒(2秒)之后运行。由于是异步的，主程序并不会等到两秒之后才跑setTimeout后面的代码，而是立即执行，所以先输出了End...，2秒之后，注册的回调函数运行了，输出了in progress。
举一反三，Ajax请求、事件处理都是类似的。比如：
$.ajax({
url: url,
data: data,
success: ()=>{},
dataType: dataType
});
$('#mydiv').on('click', ()=>{})
其中的两个箭头函数就是回调函数。
当后面的异步操作依赖于前面异步操作的结果时，就需要在回调函数中嵌套回调函数，例如：
console.log("Start...");
setTimeout(()=>{
console.log('A');
setTimeout(()=>{
console.log('AB');
});
}, 2000);
console.log("End...");
嵌套回调可以保证 AB一定在A之后输出。
Start...
End...
A
AB
回调函数是Javascript异步编程最基本的编写方式，但是容易遇到回调地狱的问题。所谓回调地狱，其实就是回调嵌套的太多，导致了代码难以阅读和编写。这是http://callbackhell.com/ 给出的一个例子：
fs.readdir(source, function (err, files) {
if (err) {
console.log('Error finding files: ' + err)
} else {
files.forEach(function (filename, fileIndex) {
console.log(filename)
gm(source + filename).size(function (err, values) {
if (err) {
console.log('Error identifying file size: ' + err)
} else {
console.log(filename + ' : ' + values)
aspect = (values.width / values.height)
widths.forEach(function (width, widthIndex) {
height = Math.round(width / aspect)
console.log('resizing ' + filename + 'to ' + height + 'x' + height)
this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
if (err) console.log('Error writing file: ' + err)
})
}.bind(this))
}
})
})
}
})
Promise
为了解决回调地狱的问题，Promise被囊括到ES6中。Promise解决回调地狱问题的核心思想是：
- 将异步操作的定义和对结果的处理分开来写
- 对结果的处理可以串联
有点抽象，我们来看一个具体的例子。
console.log("Start...");
let waitOneSecond = new Promise(function(resolve, reject) {
setTimeout(() => {
let data = 1;
resolve(data);
}, 1000);
});
let waitTenSeconds = new Promise(function(resolve, reject) {
setTimeout(() => {
let data = 10;
resolve(data);
}, 10000);
});
console.log("Async operation registered...");
waitOneSecond
.then(data => {
console.log(`first output: ${data}`);
return waitTenSeconds;
})
.then(data => {
console.log(`second output: ${data}`);
});
console.log("End...");
输出如下：
Start...
Async operation registered...
End...
first output: 1
second output: 10
上面的代码首先定义了两个异步操作：waitOneSecond和waitTenSeconds。分别是等待1秒和10秒和把1和10传给处理函数去处理。直到console.log("Async operation registered...");语句，两个异步操作都还没有开始。当执行到waitOneSecond.then时，异步操作才开始进行，主程序继续执行，输出了End...，1秒之后第一个then中注册的处理函数开始执行，输出了数字1，然后第二个异步操作waitTenSenconds.then开始执行，10秒后处理函数输出了数字10.
由此可以看到，两个异步操作的处理同样是先后执行，类似于上文例子中先打印A，后打印AB，引入Promise后就避免了嵌套回调，两个then函数调用串联起来，从而也就解决了回调地狱的问题。需要注意的是，要想将两个Promise串联起来的前提是，第一个Promise的处理函数必须返回一个Promise，如例子中的return waitTenSeconds;
除了解决回调地狱的问题，将异步操作定义和结果处理分开之后，我们可以更加灵活地处理多个异步操作。比如说，
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then(function(values) {
console.log(values);
});
// expected output: Array [3, 42, "foo"]
promise1, promise2, promise3将会一起执行，如果都成功，我们可以在then函数中对所有的结果一起进行处理。
再例如：
const promise1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, 'one');
});
const promise2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, 'two');
});
Promise.any([promise1, promise2]).then(function(value) {
console.log(value);
// Both resolve, but promise2 is faster
});
// expected output: "two"
如果promise1和promise2有一个已经完成(无论成功或者失败)，就只处理这个已经完成的异步操作。
async/await
ES6引入了迭代器和生成器，yield可以让程序暂停，而迭代器中的next()又可以程序恢复运行，利用这一点，Javascript便可以让主程序等待异步操作的完成。这对于习惯其他不使用异步编程语言(例如C语言)的同学来说就非常亲切了。而async/await正是利用迭代器和生成器编写异步函数的语法糖。例如：
let waitTenSeconds = new Promise(function(resolve, reject) {
setTimeout(() => {
let data = 10;
resolve(data);
}, 10000);
});
async function asyncFunc() {
console.log("Start...");
await waitTenSeconds.then(data => {
console.log(data);
});
console.log("End...");
}
asyncFunc();
如果asyncFunc不是async/await函数的话，输出结果应该是:
Start...
End...
10
因为asyncFunc是异步操作，主程序会先打印End...，10秒之后才会打印10。而把asyncFunc改造为异步函数(即加了async关键字)之后，await关键字会让主程序等待waitTenSeconds异步操作自行完成之后才继续运行，所以输出结果是：
Start...
10
End...
所以，async函数的写法其实更像是同步函数。值得注意的是，这样的写法虽然更加直观明了，但Javascript的性能主要是靠异步操作来提升的，如果没有必要，是不建议使用await来等待的。
async/await语法如下：
- 需要在要异步函数前加上关键字async
- await只能用于async函数中
- async函数总是返回一个Promise
小结
随着Javascript语言的发展，异步编程的写法越来越简单明了，越来越灵活多样，但无论怎么变化，回调函数是Javascript实现异步操作最基本的语法，类似于中断机制的异步原理始终未变。无论技术如何发展，如何变化，但万变不离其宗，基本原理始终未变。
阅读原文
