javascript 具有的一个特性就是异步编程。异步编程具有的优势本文不做细说，本文主要是总结如何异步编程中出现的问题和解决办法。
回调地狱
什么是回调地狱？不妨看看下面这个例子：
dothing1(arg,function(err){
if(err){
throw err;
}
else{
dothing2(arg,function(err){
if(err){
throw err;
}
else {
dothing3(arg,function (err) {
if(err){
throw err;
}
else{
dothing...
}
})
}
})
}
})
回调函数如此一层一层嵌套下去结果是可想而知。
首先是代码逻辑不好理解，其次是错误不好捕捉，回调函数中的结果返回处理也比较麻烦等等。
这种代码可能平时很少写到这样的逻辑，但是，在node中，数据库的查找，文件读取等等的操作对于这种逻辑可以说是家常便饭了。其实前端在写一些事件监听的逻辑时也会遇到回调地狱的逻辑。
怎么解决呢?
- 事件发布/订阅模式
node 中的eventEmitter 详情可以到官网看看，主要是掌握监听器（listener）的增加和删除，以及只调用一次的.one. - Promise
A Promise is an object that is used as a placeholder for the eventual results of a deferred (and possibly
asynchronous) computation----EcmaScript 2017
对于Promise，我们需要掌握什么内容呢？
先来看看mdn上Promise的目录:
可以很直观看出Promise具备的方法。方法的具体内容不做讲述。
我们来看看Promise是如何使用的。
var promiseCount = 0;
function testPromise() {
let thisPromiseCount = ++promiseCount;
let log = document.getElementById('log');
log.insertAdjacentHTML('beforeend', thisPromiseCount +
') 开始 (<small>同步代码开始</small>)<br/>');
// 新构建一个 Promise 实例：使用Promise实现每过一段时间给计数器加一的过程，每段时间间隔为1~3秒不等
let p1 = new Promise(
// resolver 函数在 Promise 成功或失败时都可能被调用
(resolve, reject) => {
log.insertAdjacentHTML('beforeend', thisPromiseCount +
') Promise 开始 (<small>异步代码开始</small>)<br/>');
// 创建一个异步调用
window.setTimeout(
function() {
// 填充 Promise
resolve(thisPromiseCount);
}, Math.random() * 2000 + 1000);
}
);
// Promise 不论成功或失败都会调用 then
// catch() 只有当 promise 失败时才会调用
p1.then(
// 记录填充值
function(val) {
log.insertAdjacentHTML('beforeend', val +
') Promise 已填充完毕 (<small>异步代码结束</small>)<br/>');
})
.catch(
// 记录失败原因
(reason) => {
console.log('处理失败的 promise ('+reason+')');
});
log.insertAdjacentHTML('beforeend', thisPromiseCount +
') Promise made (<small>Sync code terminated</small>)<br/>');
}
代码是mdn上的例子输出结果是：
1) 开始 (同步代码开始)
1) Promise 开始 (异步代码开始)
1) Promise made (Sync code terminated)
1) Promise 已填充完毕 (异步代码结束)
这里需要特别注意的是各条信息的输出顺序，厘清这一点基本就懂得如何使用Promise了。值得一提的关键是找到Promise中的异步代码即本例子中
window.setTimeout(
function() {
// 填充 Promise
resolve(thisPromiseCount);
}, Math.random() * 2000 + 1000);
因为是异步的所以应该放到下一个event loop执行，所以代码直接转到
log.insertAdjacentHTML('beforeend', thisPromiseCount +
') Promise made (<small>Sync code terminated</small>)<br/>');
因为此时p1还没执行完毕所以then后面和catch后面代码块不会执行。
这样一来就可以很好理解Promise的代码执行顺序了，一个关键点就是找到异步代码。
- async and await
async 异步函数提供了一种类似编写正常逻辑代码的的编程风格，当然，其本身还是异步的。async用起来非常顺手就跟我们写function差不多的体验，但是对于代码的执行情况我们很有必要掌握其执行情况。
下面我们来看一个简单例子(来自mdn)。
function resolveAfter2Seconds(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x);
}, 2000);
});
}
var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
var a = new AsyncFunction('a',
'b',
'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);');
a(10, 20).then(v => {
console.log(v); // 4 秒后打印 30
});
这个例子有两个地方需要理解，理解了这两处也就知道了async/await的个中机制了。
首先是AsyFunction对象的获取，它不是全局的，不能像Function或者Array一样直接new.此外也可以直接使用
async function asyncName(){
}
其次是理解为什么是4秒后才打印30.这里需要理解一下await，await顾名思义就是等待。resolveAfter2Seconds函数返回的是一个Promise（异步），当在此前加上await时说明要在此等待紧接await其后的函数执行完毕才继续执行后面的，这里异步的Promise变成了同步执行。
以上。
