JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题。以往在浏览器中，因为与服务器通讯是一种比较昂贵的操作，因此比较复杂的业务逻辑往往都放在服务器端，前端 JavaScript 只需要少数几次 AJAX 请求就可拿到全部数据。
但是到了 webapp 风行的时代，前端业务逻辑越来越复杂，往往几个 AJAX 请求之间互有依赖，有些请求依赖前面请求的数据，有些请求需要并行进行。还有在类似 node.js 的后端 JavaScript 环境中，因为需要进行大量 IO 操作，问题更加明显。这个时候使用回调函数来组织代码往往会导致代码难以阅读。
现在比较流行的解决这个问题的方法是使用 Promise，可以将嵌套的回调函数展平。但是写代码和阅读依然有额外的负担。
另外一个方案是使用 ES6 中新增的 generator，因为 generator 的本质是可以将一个函数执行暂停，并保存上下文，再次调用时恢复当时的状态。co 模块是个不错的封装。但是这样略微有些滥用 generator 特性的感觉。
ES7 中有了更加标准的解决方案，新增了 async/await 两个关键词。async 可以声明一个异步函数，此函数需要返回一个 Promise 对象。await 可以等待一个 Promise 对象 resolve，并拿到结果。
比如下面的例子，以往我们无法在 JavaScript 中使用常见的 sleep 函数，只能使用 setTimeout 来注册一个回调函数，在指定的时间之后再执行。有了 async/await 之后，我们就可以这样实现了：
async function sleep(timeout) {
return new Promise((resolve, reject) => {
setTimeout(function() {
resolve();
}, timeout);
});
}
(async function() {
console.log('Do some thing, ' + new Date());
await sleep(3000);
console.log('Do other things, ' + new Date());
})();
执行此段代码，可以在终端中看到结果：
Do some thing, Mon Feb 23 2015 21:52:11 GMT+0800 (CST)
Do other things, Mon Feb 23 2015 21:52:14 GMT+0800 (CST)
另外 async 函数可以正常的返回结果和抛出异常。await 函数调用即可拿到结果，在外面包上 try/catch 就可以捕获异常。下面是一个从豆瓣 API 获取数据的例子：
var fetchDoubanApi = function() {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
var response;
try {
response = JSON.parse(xhr.responseText);
} catch (e) {
reject(e);
}
if (response) {
resolve(response, xhr.status, xhr);
}
} else {
reject(xhr);
}
}
};
xhr.open('GET', 'https://api.douban.com/v2/user/aisk', true);
xhr.setRequestHeader("Content-Type", "text/plain");
xhr.send(data);
});
};
(async function() {
try {
let result = await fetchDoubanApi();
console.log(result);
} catch (e) {
console.log(e);
}
})();
注意:
await 命令后面的 Promise 对象，运行结果可能是 rejected，所以最好把 await 命令放在 try...catch 代码块中。
async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
}
// 另一种写法
async function myFunction() {
await somethingThatReturnsAPromise().catch(function (err){
console.log(err);
});
}
指定多少毫秒后输出一个值。代码如下：
function timeout(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value)
}
asyncPrint('hello world', 2000);
结果是2秒后在控制台上输出：
hello world
那使用async/await前需要准备什么？
babel已经支持async的transform了，所以我们使用的时候引入babel就行。当然server端和browser端，可以有不同的处理方法。在开始之前我们需要引入以下的package， preset-stage-3 里就有我们需要的async/await的编译文件。
$ npm install babel-core --save
$ npm install babel-preset-es2015 --save
$ npm install babel-preset-stage-3 --save
Browser端
Babel一开始的出现就是为了让旧浏览器也能支持新的ES6特性，提升我们的开发体验。所以在Babel一开始就是可以通过babel-cli终端进行编译的。或者引入babel文件在浏览器端进行编译。当然这些都不是我最推荐的，所以我就带过不说啦。在前端静态资源配置里，webpack是现在比较好的解决方案，它支持静态资源的模块依赖，打包合并，还有语言的预处理，当然在这里我们就是指babel的处理。
// webpack.config.js
// 省略上面的文件输入输出的配置，直接看模块加载器的配置
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: "babel",
query: {
presets: ['es2015', 'stage-3']
}
},
]
}
Server端
相对来说，后端比前端需要处理的异步IO地方多得多，也是更加需要这个。那我们在Server端又如何引入babel呢？
其实最简单也是最麻烦的方法就是，直接把js文件通过babel编译出新的文件再来使用。当然也就免不了冗余文件了，眼不见心不烦，还是换一个方法吧。
我们使用官方提供的require hook方法，顾名思义就是通过require进来后，接下来的文件进行require的时候都会经过Babel的处理。因为我们知道CommonJs是同步的模块依赖，所以也是可行的方法。我们需要多一个用于启动的js文件，一个真正执行程序的js文件。
// index.js
// 用于引入babel，并且启动app.js
require("babel-core/register");
require("./app.js");
配置完hook之后，我们就配置babel的.babelrc文件，它是一个json格式的文件。es2015看情况配置，如果是已经是Node5.0版本，就无需再进行编译。
{
"presets": ["stage-3", "es2015"]
}
ES7 还在草案阶段，那现在想用这个特性怎么办？可以尝试 google 的一个 JavaScript 预编译器 traceur，可以将高版本的 JavaScript 编译为 ES5 代码，已经实验性的支持了 async/await （需要使用 --experimental 来指定开启）。traceur 可以直接在后端使用，也可以在浏览器中使用。另外如果只在 node.js 环境中使用的话，还有一些 polyfill 模块，比如这个。
