Javascript中的异步编程

前言

最近，小伙伴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：欢迎关注我的公众号 “超哥前端小栈”，交流更多的想法与技术。