Javascript中的异步编程

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传给处理函数去处理。第一个then函数定义了waitOneSecond的结果处理，然后返回另外一个异步操作waitTenSeconds，如此第二个then就能串联写到第一个then之后了。1秒之后第一个异步操作完成，第一个then中注册的处理函数开始执行，输出了数字1，10秒后第二个异步操作waitTenSenconds完成，定义的处理函数开始执行，输出了数字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实现异步操作最基本的语法，类似于中断机制的异步原理始终未变。无论技术如何发展，如何变化，但万变不离其宗，基本原理始终未变。