构建一个运用顺序总是会面临异步挪用，不论是在 Web 前端界面，照样 Node.js 效劳端都是云云，JavaScript 内里处置惩罚异步挪用一向是非常恶心的一件事变。之前只能经由过程回调函数，厥后逐渐又演变出来许多计划，末了 Promise 以简朴、易用、兼容性好取胜，然则依然有非常多的题目。实在 JavaScript 一向想在言语层面完全处理这个题目，在 ES6 中就已支撑原生的 Promise，还引入了 Generator 函数，终究在 ES7 中决议支撑 async 和 await。
基础语法
async/await 究竟是怎样处理异步挪用的写法呢？简朴来讲，就是将异步操纵用同步的写法来写。先来看下最基础的语法（ES7 代码片断）：
const f = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(123);
}, 2000);
});
};
const testAsync = async () => {
const t = await f();
console.log(t);
};
testAsync();起首定义了一个函数 f，这个函数返回一个 Promise，而且会延时 2 秒，resolve 而且传入值 123。testAsync 函数在定义时运用了关键字 async，然后函数体中合营运用了 await，末了实行 testAsync。全部顺序会在 2 秒后输出 123，也就是说 testAsync 中常量 t 取得了 f 中 resolve 的值，而且经由过程 await 壅塞了背面代码的实行，直到 f 这个异步函数实行完。
对照 Promise
仅仅是一个简朴的挪用，就已能够看出来 async/await 的壮大，写码时能够非常文雅地处置惩罚异步函数，完全离别回调噩梦和无数的 then 要领。我们再来看下与 Promise 的对照，一样的代码，假如完全运用 Promise 会有什么题目呢？
const f = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(123);
}, 2000);
});
};
const testAsync = () => {
f().then((t) => {
console.log(t);
});
};
testAsync();从代码片断中不难看出 Promise 没有处理好的事变，比方要有许多的 then 要领，整块代码会充溢 Promise 的要领，而不是营业逻辑自身，而且每个 then 要领内部是一个自力的作用域，如果想同享数据，就要将部份数据暴露在最外层，在 then 内部赋值一次。虽然云云，Promise 关于异步操纵的封装照样非常不错的，所以 async/await 是基于 Promise 的，await 背面是要吸收一个 Promise 实例。
对照 RxJS
RxJS 也是非常有意思的东西，用来处置惩罚异步操纵，它更能处置惩罚基于流的数据操纵。举个例子，比方在 Angular2 中 http 要求返回的就是一个 RxJS 组织的 Observable Object，我们就能够如许做：
$http.get(url)
.map(function(value) {
return value + 1;
})
.filter(function(value) {
return value !== null;
})
.forEach(function(value) {
console.log(value);
})
.subscribe(function(value) {
console.log('do something.');
}, function(err) {
console.log(err);
});假如是 ES6 代码能够进一步简约：
$http.get(url)
.map(value => value + 1)
.filter(value => value !== null)
.forEach(value => console.log(value))
.subscribe((value) => {
console.log('do something.');
}, (err) => {
console.log(err);
}); 能够看出 RxJS 关于这类数据能够做一种相似流式的处置惩罚，也是非常文雅，而且 RxJS 壮大的地方在于你还能够对数据做作废、监听、撙节等等的操纵，这里不一一举例了，感兴趣的话能够去看下 RxJS 的 API。
这里要申明一下的就是 RxJS 和 async/await 一升引也是能够的，Observable Object 中有 toPromise 要领，能够返回一个 Promise Object，一样能够连系 await 运用。固然你也能够只运用 async/await 合营 underscore 或许其他库，也能完成很文雅的结果。总之，RxJS 与 async/await 不争执。
非常处置惩罚
经由过程运用 async/await，我们就能够合营 try/catch 来捕捉异步操纵过程当中的题目，包括 Promise 中 reject 的数据。
const f = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(234);
}, 2000);
});
};
const testAsync = () => {
try {
const t = await f();
console.log(t);
} catch (err) {
console.log(err);
}
};
testAsync();代码片断中将 f 要领中的 resolve 改成 reject，在 testAsync 中，经由过程 catch 能够捕捉到 reject 的数据，输出 err 的值为 234。try/catch 运用时也要注重局限和层级。假如 try 局限内包括多个 await，那末 catch 会返回第一个 reject 的值或毛病。
const f1 = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(111);
}, 2000);
});
};
const f2 = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(222);
}, 3000);
});
};
const testAsync = () => {
try {
const t1 = await f1();
console.log(t1);
const t2 = await f2();
console.log(t2);
} catch (err) {
console.log(err);
}
};
testAsync();如代码片断所示，testAsync 函数体中 try 有两个 await 函数，而且都离别 reject，那末 catch 中仅会触发 f1 的 reject，输出的 err 值是 111。
开始运用
无论是 Web 前端照样 Node.js 效劳端，都能够经由过程预编译的手腕完成运用 ES6 和 ES7 来写代码，现在最盛行的计划是经由过程 Babel 将运用 ES7、ES6 写的代码编译为 E6 或 ES5 的代码来实行。
Node.js 效劳端设置
效劳端运用 Babel，最简朴的体式格局是经由过程 require hook。
起首装置 Babel：
$ npm install babel-core --save装置 async/await 支撑：
$ npm install babel-preset-stage-3 --save在效劳端代码的根目录中设置 .babelrc 文件，内容为：
{
"presets": ["stage-3"]
}在顶层代码文件（server.js 或 app.js 等）中引入 Babel 模块：
require("babel-core/register");在这句背面引入的模块，都将会自动经由过程 babel 编译，但当前文件不会被 babel 编译。别的，须要注重 Node.js 的版本，假如是 4.0 以上的版本则默许支撑绝大部份 ES6，能够直接启动。然则假如是 0.12 摆布的版本，就须要经由过程 node —harmory 来启动才能够支撑。由于 stage-3 形式，Babel 不会编译基础的 ES6 代码，环境既然支撑又何必要编译为 ES5？如许做也是为了进步机能和编译效力。
设置 Web 前端构建
能够经由过程增添 Gulp 的预编译 task 来支撑。
起首装置 gulp-babel 插件：
$ npm install gulp-babel --save-dev然后编写设置：
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('babel', function() {
return gulp.src('src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});除了 Gulp-babel 插件，也能够运用官方的 Babel-loader 连系 Webpack 或 Browserify 运用。
要注重的是，虽然官方也有纯浏览器版本的 Babel.js，然则浏览器限定非常多，而且对客户端机能影响也较大，不引荐运用。
LeanEngine Full Stack
LeanEngine（云引擎）是 LeanCloud 推出的效劳器端运转环境，支撑 Node.js 和 Python 环境，功能壮大而且现在免费，连系 LeanCloud JavaScript SDK，使底本庞杂的开辟事情变得简朴高效。现在也支撑 Redis 和外洋节点，轻松满足你的营业需求。
LeanCloud 运用自已的效劳编写出了许多的运用和 Web 产物。为了轻易列位开辟者基于 LeanEngine 来开辟运用，LeanCloud 整理了现在开辟 Web 端产物的手艺栈，并连系 LeanEngine 特性，推出了一套完全有用的手艺处理计划：LeanEngine-Full-Stack，它已设置了 Babel，能够在 LeanEngine 中连系 JavaScript SDK 运用 async/await 处置惩罚异步操纵。所以，还等什么？快来下载编写新项目吧。
Enjoy!
结语
LeanCloud 愿望能够经由过程构建最简朴易用的手艺产物，协助列位开辟者和创业者加快产物开辟，尽量地勤俭资本本钱、时候本钱和机会本钱，愿望本文能够协助到你。有什么题目，能够在 LeanEngine-Full-Stack @GitHub 堆栈 中提交 issue，或许直接去 LeanCloud 社区 发问。
