异步编程是每个使用 JavaScript 编程的人都会遇到的问题，无论是前端的 ajax 请求，或是 node 的各种异步 API。本文就来总结一下常见的四种处理异步编程的方法。
一、回调函数
使用回调函数是最常见的一种形式，下面来举几个例子：
// jQuery ajax
$.get('test.html', data => {
$('#result').html(data)
})
// node 异步读取文件
const fs = require('fs')
fs.readFile('/etc/passwd', (err, data) => {
if (err) {
throw err
}
console.log(data)
})
回调函数非常容易理解，就是定义函数的时候将另一个函数（回调函数）作为参数传入定义的函数当中，当异步操作执行完毕后在执行该回调函数，从而可以确保接下来的操作在异步操作之后执行。
回调函数的缺点在于当需要执行多个异步操作的时候会将多个回调函数嵌套在一起，组成代码结构上混乱，被称为回调地狱（callback hell）。
func1(data0, data1 => {
func2(data2, data3 => {
func3(data3, data4 => data4)
})
})
二、Promise
Promise 利用一种链式调用的方法来组织异步代码，可以将原来以回调函数形式调用的代码改为链式调用。
// jQuery ajax promise 方式
$.get('test.html')
.then(data => $(data))
.then($data => $data.find('#link').val('href'))
.then(href => console.log(href))
resolve 和 reject
自己定义一个 Promise 形式的函数在 ES6 当中也非常简单：
var promise = new Promise(function(resolve, reject) {
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
promise.then(function(value) {
// success
}, function(value) {
// failure
});
Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 方法和 reject 方法。
如果异步操作成功，则用 resolve 方法将 Promise 对象的状态，从「未完成」变为「成功」（即从 pending 变为 resolved）；
如果异步操作失败，则用 reject 方法将 Promise 对象的状态，从「未完成」变为「失败」（即从 pending 变为 rejected）。
then 和 catch
在多个任务的情况下 then 方法可以用一个清晰的方式完成。then可以使用链式调用的写法原因在于，每一次执行该方法时总是会返回一个 Promise 对象。另外，在then onFulfilled的函数当中的返回值，可以作为后续操作的参数。
function printHello (ready) {
return new Promise(function (resolve, reject) {
if (ready) {
resolve("Hello");
} else {
reject("Good bye!");
}
});
}
printHello(true).then(function (message) {
return message;
}).then(function (message) {
return message + ' World';
}).then(function (message) {
return message + '!';
}).then(function (message) {
alert(message);
}).catch(function(reason){ // error
console.log(reason);
});
Promise.all 和 Promise.race
Promise.all 可以接收一个元素为Promise 对象的数组作为参数，当这个数组里面所有的 Promise 对象都变为 resolve 时，该方法才会返回。
var p1 = new Promise(function (resolve) {
setTimeout(function () {
resolve("Hello");
}, 3000);
});
var p2 = new Promise(function (resolve) {
setTimeout(function () {
resolve("World");
}, 1000);
});
Promise.all([p1, p2]).then(function (result) {
console.log(result); // ["Hello", "World"]
});
还有一个和 Promise.all 相类似的方法 Promise.race ，它同样接收一个数组，不同的是只要该数组中的 Promise 对象的状态发生变化（无论是 resolve 还是 reject）该方法都会返回。
兼容性
关于 Promise 对象的兼容性问题。
在浏览器端，一些主流的浏览器都已经可以使用 Promise 对象进行开发，在 Node.js 配合 babel 也可以很方便地使用。
如果要兼容旧的浏览器，建议可以寻找一些第三方的解决方案，例如 jQuery 的 $.Deferred。
util.promisify
在 node 8.0 以上的版本还可以利用 util.promisify 方法将回调形式的函数变为 Promise 形式。
const util = require('util')
const fs = require('fs')
const readPromise = util.promisify(fs.readFile)
readPromise('test.txt').then(data => console.log(data.toString()))
三、Generators
什么是生成器？
我们从一个示例开始：
function* quips(name) {
yield "你好 " + name + "!";
yield "希望你能喜欢这篇介绍ES6的译文";
if (name.startsWith("X")) {
yield "你的名字 " + name + " 首字母是X，这很酷！";
}
yield "我们下次再见！";
}
这段代码看起来很像一个函数，我们称之为生成器函数，它与普通函数有很多共同点，但是二者有如下区别：
- 普通函数使用function声明，而生成器函数使用function*声明。
- 在生成器函数内部，有一种类似return的语法：关键字yield。二者的区别是，普通函数只可以return一次，而生成器函数可以yield多次（当然也可以只yield一次）。在生成器的执行过程中，遇到yield表达式立即暂停，后续可恢复执行状态。
这就是普通函数和生成器函数之间最大的区别，普通函数不能自暂停，生成器函数可以。
生成器做了什么？
当你调用quips()生成器函数时发生了什么？
> var iter = quips("jorendorff");
[object Generator]
> iter.next()
{ value: "你好 jorendorff!", done: false }
> iter.next()
{ value: "希望你能喜欢这篇介绍ES6的译文", done: false }
> iter.next()
{ value: "我们下次再见！", done: false }
> iter.next()
{ value: undefined, done: true }
生成器是迭代器
我们学习了ES6的迭代器，它是ES6中独立的内建类，同时也是语言的一个扩展点，通过实现Symbol.iterator()和.next()两个方法你就可以创建自定义迭代器。
class RangeIterator {
constructor(start, stop) {
this.value = start;
this.stop = stop;
}
[Symbol.iterator]() { return this; }
next() {
var value = this.value;
if (value < this.stop) {
this.value++;
return {done: false, value: value};
} else {
return {done: true, value: undefined};
}
}
}
// 返回一个新的迭代器，可以从start到stop计数。
function range(start, stop) {
return new RangeIterator(start, stop);
}
四、Async/Await
node7.6 以上的版本引入了一个 ES7 的新特性 Async/Await 是专门用于控制异步代码。先看一个例子：
const util = require('util')
const fs = require('fs')
const readFile = util.promisify(fs.readFile)
async function readFiles () {
const txt = await readFile('file1.txt', 'utf8')
console.log(txt)
const txt2 = await readFile('file2.txt', 'utf8')
console.log(txt2)
})
首先要使用async 关键字定义一个包含异步代码的函数，在 Promise 形式的异步函数前面使用 await 关键字就可以将异步写成同步操作的形式。
看上去与 Generators 控制方式相差不大，但是 Async/Await 是原生用于控制异步，所以是比较推荐使用的。
五、错误处理
最后来探讨下四种异步控制方法的错误处理。
回调函数
回调函数错误处理非常简单，就是在回调函数中同时回传错误信息：
const fs = require('fs')
fs.readFile('file.txt', (err, data) => {
if (err) {
throw err
}
console.log(data)
})
Promise
Promise 在 then 方法之后使用一个 catch 方案来捕捉错误信息：
const fs = require('fs')
const readFile = util.promisify(fs.readFile)
readFile('file.txt')
.then(data => console.log(data))
.catch(err => console.log(err))
Generators 和 Async/Await
Generators 和 Async/Await 比较类似，可以有两种方式，第一种使用 Promise 的 catch 方法，第二种用 try catch 关键字。
Promise catch
const fs = require('fs')
const co = require('co')
const readFile = util.promisify(fs.readFile)
co(function* () {
const data = yield readFile('file.txt').catch(err => console.log(err))
})
const fs = require('fs')
const co = require('co')
const readFile = util.promisify(fs.readFile)
async function testRead() {
const data = await readFile('file.txt').catch(err => console.log(err))
}
try/catch
const fs = require('fs')
const co = require('co')
const readFile = util.promisify(fs.readFile)
co(function* () {
try {
const data = yield readFile('file.txt')
} catch(err) {
console.log(err)
}
})
const fs = require('fs')
const readFile = util.promisify(fs.readFile)
async function testRead() {
try {
const data = await readFile('file.txt')
} catch(err) {
console.log(data)
}
}