前言
最近，小伙伴S 问了我一段代码：
const funB = (value) => {
console.log("funB "+ value);
};
const funA = (callback) => {
...
setTimeout(() => {
typeof callback === "function" && callback("is_ok!");
}, 1000);
}
funA(funB);
他不太理解这段代码中，funB 函数作为 funA 函数的参数这样的写法。从语义上看，callback 的意思是回调，那么是说 funB 是 funA 的回调嘛？
我给他解释说，funB 函数的确是 funA 函数的回调，它会等待 funA 中前面的语句都执行完，再去执行。这是一种异步编程的写法。
小伙伴S 还是有点不太理解：异步编程是什么？除了回调函数之外，异步编程还有哪些？
别急，让我们先从概念入手，再逐个理解异步编程中的方法，看看它的前世今生。
什么是异步？
所谓"异步"(Asynchronous)，可以理解为一种不连续的执行。简单地说，就是把一个任务分成两段，先执行第一段，然后转而执行其他任务，等接到通知了，再回过头执行第二段。
我们都知道，JavaScript是单线程的。而异步，对于JavaScript的重要性，则体现在非阻塞这一点上。一些常见的异步有：
onclick在其事件触发的时候，回调会立即添加到任务队列中。setTimeout只有当时间到达的时候，才会将回调添加到任务队列中。ajax在网络请求完成并返回之后，才将回调添加到任务队列中。
接下来，我们一起来看看Javascript中的异步编程，具体有哪几种。
实现异步编程的方法
一、回调函数
上面不止一次提到了回调函数。它从概念上说很简单，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。它是异步编程中，最基本的方法。
举个例子，假定有两个函数 f1 和 f2，后者等待前者的执行结果。顺序执行的话，可以这样写：
f1();
f2();
但是，如果 f1 是一个很耗时的任务，该怎么办？
改写一下 f1，把 f2 写成 f1 的回调函数：
const f1 = (callback) => {
setTimeout(() => {
typeof callback === "function" && callback();
}, 1000);
}
f1(f2);
二、事件监听
onclick 的写法，在异步编程中，称为事件监听。它的思路是：如果任务的执行不取决于代码的顺序，而取决于某个事件是否发生，也就事件驱动模式。
还是 f1 和 f2 的例子，为了简化代码，这里采用jQuery的写法：
// 为f1绑定一个事件，当f1发生done事件，就执行f2
f1.on('done', f2);
// 改写f1
function f1(){
setTimeout(() => {
// f1的任务代码，执行完成后，立即触发done事件
f1.trigger('done');
}, 1000);
}
它的优点是：比较容易理解，耦合度降低了。可以绑定多个事件，而且每个事件还能指定多个回调函数。
缺点是：整个程序都会变为由事件来驱动，流程会变得很不清晰。
三、发布/订阅
这是一种为了处理一对多的业务场景而诞生的设计模式，它也是一种异步编程的方法。vue中MVVM的实现，就有它的功劳。
关于概念，我们可以这样理解，假定存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"（publish-subscribe pattern），又称"观察者模式"（observer pattern）。
下面的例子，采用的是 Morgan Roderick 的 PubSubJS ，这是一个无依赖的JavaScript插件：
import PubSub from 'pubsub-js';
// f2向 'PubSub' 订阅信号 'done'
PubSub.subscribe('done', f2);
const f1 = () => {
setTimeout(() => {
// f1执行完成后，向 'PubSub' 发布信号 'done'，从而执行 f2
PubSub.publish('done');
}, 1000);
};
f1();
// f2 完成执行后，也可以取消订阅
PubSub.unsubscribe("done", f2);
这种模式有点类似于“事件监听”，但是明显优于后者。因为，我们可以通过查看“消息中心”，了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。
四、Promise对象
接下来，我们聊聊与ajax相关的异步编程方法，Promise对象。
Promise 是由 CommonJS 提出的一种规范，它是为了解决回调函数嵌套，也就是回调地狱的问题。它不是新的语法功能，而是一种新的写法，允许将回调函数的横向加载，改成纵向加载。它的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。
继续改写 f1 和 f2：
const f1 = () => {
return new Promise((resolve, reject) => {
let timeOut = Math.random() * 2;
setTimeout(() => {
if (timeOut < 1) {
resolve('200 OK');
} else {
reject('timeout in ' + timeOut + ' seconds.');
}
}, 1000);
});
};
const f2 = () => {
console.log('start f2');
};
f1().then((result) => {
console.log(result);
f2();
}).catch((reason) => {
...
);
例子中，用随机数模拟了请求的超时。当 f1 返回 Promise 的 resolve 时，执行 f2。
Promise的优点是：回调函数变成了链式的写法，程序的流程可以看得很清楚。还有就是，如果一个任务已经完成，再添加回调函数，该回调函数会立即执行。所以，你不用担心是否错过了某个状态。
缺点就是：编写和理解，都相对比较难。
五、Generator
generator（生成器）是 ES6 标准引入的数据类型。它最大特点，就是可以交出函数的执行权（即暂停执行），是协程在 ES6 中的实现。
看上去它像一个函数，定义如下：
function* gen(x) {
var y = yield x + 2;
return y;
}
它不同于普通函数，函数名之前要加星号(*)，是可以暂停执行的。
整个 Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。用 yield 语句注明异步操作需要暂停的地方。
我们来看一下 Generator 函数执行的过程：
var g = gen(1);
// { value: 3, done: false }
g.next();
// { value: undefined, done: true }
g.next();
上面代码中，调用 Generator 函数，会返回一个内部指针（即遍历器 ）g 。这是 Generator 函数不同于普通函数的另一个地方，即执行它不会返回结果，返回的是指针对象。调用指针 g 的 next 方法，会移动内部指针（即执行异步任务的第一段），指向第一个遇到的 yield 语句，上例是执行到 x + 2 为止。
换言之，next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法，会返回一个对象，表示当前阶段的信息（ value 属性和 done 属性）。value 属性是 yield 语句后面表达式的值，表示当前阶段的值；done 属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段。
六、async/await
这是 ES8 中提出的一种更优雅的异步解决方案，灵感来自于 C# 语言。具体可前往 细说 async/await 相较于 Promise 的优势 ，深入理解其原理及特性。
来看个例子，要实现一个暂停功能，输入 N 毫秒，则停顿 N 毫秒后才继续往下执行。
const sleep = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, time);
})
};
const start = async () => {
console.log('start');
// 在这里使用起来就像同步代码那样直观
await sleep(1000);
console.log('end');
};
start();
控制台先输出 start，稍等 1 秒后，输出结果 ok，最后输出 end。
解析一下上述代码：
- async 表示这是一个async函数，await 只能用在这个函数里面。
- await 表示在这里等待 promise 返回了结果，再继续执行。
- 使用起来，就像写同步代码一样地优雅。
总结
JavaScript的异步编写方式，从 回调函数 到 async/await，感觉在写法上，每次都有进步，其本质就是一次次对语言层抽象的优化。以至于现在，我们可以像同步一样地，去处理异步。
换句话说就是：异步编程的最高境界，就是根本不用关心它是不是异步。
PS：欢迎关注我的公众号 “超哥前端小栈”，交流更多的想法与技术。
