深入理解ES7的async/await的用法
在最开始学习ES6的Promise时，曾写过一篇博文《promise和co搭配生成器函数方式解决js代码异步流程的比较》，文章中对比了使用Promise和co模块搭配生成器函数解决js异步的异同。
在文章末尾，提到了ES7的async和await，只是当时只是简单的提了一下，并未做深入探讨。
在前两个月发布的NodejsV7中，已添加了对async和await的支持，今天就来对这个东东做一下深入的探究。以更加优雅的方法写异步代码。
async/await是什么
async/await可以说是co模块和生成器函数的语法糖。用更加清晰的语义解决js异步代码。
熟悉co模块的同学应该都知道，co模块是TJ大神写的一个使用生成器函数来解决异步流程的模块，可以看做是生成器函数的执行器。而async/await则是对co模块的升级，内置生成器函数的执行器，不再依赖co模块。同时，async返回的是Promise。
从上面来看，不管是co模块还是async/await，都是将Promise作为最基础的单元，对Promise不很了解的同学可以先深入了解一下Promise。
对比Promise,co,async/await
下面我们使用一个简单的例子，来对比一下三种方式的异同，以及取舍。
我们采用mongodb的nodejs驱动，查询mongodb数据库作为例子，原因是mongodb的js驱动已经默认实现了返回Promise，而不用我们单独去包装Promise了。
使用Promise链
MongoClient.connect(url+db_name).then(db=>{
returndb.collection('blogs');
}).then(coll=>{
returncoll.find().toArray();
}).then(blogs=>{
console.log(blogs.length);
}).catch(err=>{
console.log(err);
})
Promise的then()方法可以返回另一个Promise，也可以返回一个同步的值，如果返回的是一个同步值，将会被包装成一个Promise。
上面的例子中，db.collection()将返回一个同步的值，即集合对象，但是被包装成Promise，将会透传到下一个then()方法。
上面一个例子，是使用的Promise链。
先连接数据库MongoClient.connect()返回一个Promise，然后在then()方法里获得数据库对象db，然后再获取到coll对象再返回。在下一个then()方法获得coll对象，然后进行查询，查询结果返回，逐层调用then()方法，形成一个Promise链。
在这个Promise链上，如果任何一个环节出现异常，都会被最后的catch()捕捉到。
可以说，这个使用Promise链写的代码，比层层调用回调函数更优雅，流程也更明确。先获得数据库对象，再获得集合对象，最后查询数据。
但是这里有个不怎么“优雅”的问题，在于，每一个then()方法获取的对象，都是上一个then()方法返回的数据。而不能跨层访问。
什么意思，就是说在第三个then(blogs=>{})中我们只能获取到查询的结果blogs，而不能使用上面的db对象和coll对象。这个时候，如果要打印出blogs列表后，要关闭数据库db.close()怎么办？
这个时候，可以两种解决方法：
第一种是，使用then()嵌套。我们将Promise链打断，使之嵌套，犹如使用回调函数的嵌套一般：
MongoClient.connect(url+db_name).then(db=>{
letcoll=db.collection('blogs');
coll.find().toArray().then(blogs=>{
console.log(blogs.length);
db.close();
}).catch(err=>{
console.log(err);
});
}).catch(err=>{
console.log(err);
})
这里我们将两个Promise嵌套，这样在最后一个查询操作里面，就可以调用外面的db对象了。但是这中方式，并不推荐。原因很简单，我们从一种回调函数地狱走向了另一种Promise回调地狱。
而且，我们要对每个Promise的异常进行捕捉，因为Promise没有形成链。
还有一种方式，是在每个then()方法里都将db传过来：
MongoClient.connect(url+db_name).then(db=>{
return{db:db,coll:db.collection('blogs')};
}).then(result=>{
return{db:result.db,blogs:result.coll.find().toArray()};
}).then(result=>{
returnresult.blogs.then(blogs=>{//注意这里，result.coll.find().toArray()返回的是一个Promise，因此这里需要再解析一层
return{db:result.db,blogs:blogs}
})
}).then(result=>{
console.log(result.blogs.length);
result.db.close();
}).catch(err=>{
console.log(err);
});
我们在每个then()方法的返回中，都将db及其每次的其他结果组成一个对象返回。请注意，如果每次的结果都是一个同步的值还好说，但是如果是一个Promise值，每一个Promise都需要多做一层解析。
例如上面的一个例子，第二个then()方法返回的{db:result.db,blogs:result.coll.find().toArray()}对象中，blogs是一个Promise，在下一个then()方法中，我们无法直接引用博客列表数组值，因此需要先调用then()方法解析一层，然后将两个同步值db和blogs返回。
注意，这里涉及到了Promise的嵌套，不过一个Promise只嵌套一层then()。
这种方式，也是很蛋疼的一个方式，因为如果遇到then()方法中返回的不是同步的值，而是Promise的话，我们需要多做很多工作。而且，每次都透传一个“多余”的db对象，在逻辑上也有点冗余。
但除此之外，对于Promise链的使用，如果遇到上面的问题，好像也没其他更好的方法解决了。我们只能根据场景去选择一种“最优”的方案，如果要使用Promise链的话。
鉴于Promise上面蛋疼的问题，TJ大神将ES6中的生成器函数，用co模块包装了一下，以更优雅的方式来解决上面的问题。
co搭配生成器函数
如果使用co模块搭配生成器函数，那么上面的例子可以改写如下：
constco=require('co');
co(function*(){
letdb=yieldMongoClient.connect(url+db_name);
letcoll=db.collection('blogs');
letblogs=yieldcoll.find().toArray();
console.log(blogs.length);
db.close();
}).catch(err=>{
console.log(err);
});
co是一个函数，将接受一个生成器函数作为参数，去执行这个生成器函数。生成器函数中使用yield关键字来“同步”获取每个异步操作的值。
上面代码在代码形式上，比上面使用Promise链要优雅，我们消灭了回调函数，代码看起来都是同步的。除了使用co和yield有点怪之外。
使用co模块，我们要将所有的操作包装成一个生成器函数，然后使用co()去调用这个生成器函数。看上去也还可以接受，但是ES的进化是不满足于此的，于是async/await被提到了ES7的提案。
async/await
我们先看一下使用async/await改写上面的代码：
(asyncfunction(){
letdb=awaitMongoClient.connect(url+db_name);
letcoll=db.collection('blogs');
letblogs=awaitcoll.find().toArray();
console.log(blogs.length);
db.close();
})().catch(err=>{
console.log(err);
});
我们对比代码可以看出，async/await和co两种方式代码极为相似。
co换成了async，yield换成了await。同时生成器函数变成了普通函数。
这种方式在语义上更加清晰明了，async表明这个函数是异步的，同时await表示要“等待”异步操作返回值。
async函数返回一个Promise，上面的代码其实是这样：
letgetBlogs=asyncfunction(){
letdb=awaitMongoClient.connect(url+db_name);
letcoll=db.collection('blogs');
letblogs=awaitcoll.find().toArray();
db.close();
returnblogs;
};
getBlogs().then(result=>{
console.log(result.length);
}).catch(err=>{
console.log(err);
})
我们定义getBlogs为一个async函数，最后返回得到的博客列表最终会被包装成一个Promise返回，如上，我们直接调用getBlogs().then()方法可获取async函数返回值。
好了，上面我们简单对比了一下三种解决异步方案，下面我们来深入了解一下async/await。
深入async/await
async返回值
async用于定义一个异步函数，该函数返回一个Promise。
如果async函数返回的是一个同步的值，这个值将被包装成一个理解resolve的Promise，等同于returnPromise.resolve(value)。
await用于一个异步操作之前，表示要“等待”这个异步操作的返回值。await也可以用于一个同步的值。
//返回一个Promise
lettimer=asyncfunctiontimer(){
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve('500');
},500);
});
}
timer().then(result=>{
console.log(result);//500
}).catch(err=>{
console.log(err.message);
});
//返回一个同步的值
letsayHi=asyncfunctionsayHi(){
lethi=await'helloworld';
returnhi;//等同于returnPromise.resolve(hi);
}
sayHi().then(result=>{
console.log(result);
});
上面这个例子返回是一个同步的值，字符串'helloworld'，sayHi()是一个async函数，返回值被包装成一个Promise，可以调用then()方法获取返回值。
对于一个同步的值，可以使用await，也可以不使用await。效果效果是一样的。具体用不用，看情况。
比如上面使用mongodb查询博客那个例子，letcoll=db.collection('blogs');，这里我们就没有用await，因为这是一个同步的值。当然，也可以使用await，这样会显得代码统一。虽然效果是一样的。
async函数的异常
letsayHi=asyncfunctionsayHi(){
thrownewError('出错了');
}
sayHi().then(result=>{
console.log(result);
}).catch(err=>{
console.log(err.message);//出错了
});
我们直接在async函数中抛出一个异常，由于返回的是一个Promise，因此，这个异常可以调用返回Promise的catch()方法捕捉到。
和Promise链的对比：
我们的async函数中可以包含多个异步操作，其异常和Promise链有相同之处，如果有一个Promise被reject()那么后面的将不会再进行。
letcount=()=>{
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
reject('故意抛出错误');
},500);
});
}
letlist=()=>{
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve([1,2,3]);
},500);
});
}
letgetList=async()=>{
letc=awaitcount();
letl=awaitlist();
return{count:c,list:l};
}
console.time('begin');
getList().then(result=>{
console.log(result);
}).catch(err=>{
console.timeEnd('begin');
console.log(err);
});
//begin:507.490ms
//故意抛出错误
如上面的代码，定义两个异步操作，count和list，使用setTimeout延时500毫秒，count故意直接抛出异常，从输出结果来看，count()抛出异常后，直接由catch()捕捉到了，list()并没有继续执行。
并行
使用async后，我们上面的例子都是串行的。比如上个list()和count()的例子，我们可以将这个例子用作分页查询数据的场景。
先查询出数据库中总共有多少条记录，然后再根据分页条件查询分页数据，最后返回分页数据以及分页信息。
我们上面的例子count()和list()有个“先后顺序”，即我们先查的总数，然后又查的列表。其实，这两个操作并无先后关联性，我们可以异步的同时进行查询，然后等到所有结果都返回时再拼装数据即可。
letcount=()=>{
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve(100);
},500);
});
}
letlist=()=>{
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve([1,2,3]);
},500);
});
}
letgetList=async()=>{
letresult=awaitPromise.all([count(),list()]);
returnresult;
}
console.time('begin');
getList().then(result=>{
console.timeEnd('begin');//begin:505.557ms
console.log(result);//[100,[1,2,3]]
}).catch(err=>{
console.timeEnd('begin');
console.log(err);
});
我们将count()和list()使用Promise.all()“同时”执行，这里count()和list()可以看作是“并行”执行的，所耗时间将是两个异步操作中耗时最长的耗时。
最后得到的结果是两个操作的结果组成的数组。我们只需要按照顺序取出数组中的值即可。
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之后，我们就可以这样实现了：
asyncfunctionsleep(timeout){
returnnewPromise((resolve,reject)=>{
setTimeout(function(){
resolve();
},timeout);
});
}
(asyncfunction(){
console.log('Dosomething,'+newDate());
awaitsleep(3000);
console.log('Dootherthings,'+newDate());
})();
执行此段代码，可以在终端中看到结果：
Dosomething,MonFeb23201521:52:11GMT+0800(CST)
Dootherthings,MonFeb23201521:52:14GMT+0800(CST)
另外async函数可以正常的返回结果和抛出异常。await函数调用即可拿到结果，在外面包上try/catch就可以捕获异常。下面是一个从豆瓣API获取数据的例子：
varfetchDoubanApi=function(){
returnnewPromise((resolve,reject)=>{
varxhr=newXMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status>=200&&xhr.status<300){
varresponse;
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);
});
};
(asyncfunction(){
try{
letresult=awaitfetchDoubanApi();
console.log(result);
}catch(e){
console.log(e);
}
})();
async函数的用法
同Generator函数一样，async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。
下面是一个例子。
asyncfunctiongetStockPriceByName(name){
varsymbol=awaitgetStockSymbol(name);
varstockPrice=awaitgetStockPrice(symbol);
returnstockPrice;
}
getStockPriceByName('goog').then(function(result){
console.log(result);
});
阅读本文前，期待您对promise和ES6(ECMA2015)有所了解，会更容易理解。本文以体验为主，不会深入说明，结尾有详细的文章引用。
第一个例子
Async/Await应该是目前最简单的异步方案了，首先来看个例子。这里我们要实现一个暂停功能，输入N毫秒，则停顿N毫秒后才继续往下执行。
varsleep=function(time){
returnnewPromise(function(resolve,reject){
setTimeout(function(){
resolve();
},time);
})
};
varstart=asyncfunction(){
//在这里使用起来就像同步代码那样直观
console.log('start');
awaitsleep(3000);
console.log('end');
};
start();
控制台先输出start，稍等3秒后，输出了end。
基本规则
async表示这是一个async函数，await只能用在这个函数里面。await表示在这里等待promise返回结果了，再继续执行。await后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…）
获得返回值
await等待的虽然是promise对象，但不必写.then(..)，直接可以得到返回值。
varsleep=function(time){
returnnewPromise(function(resolve,reject){
setTimeout(function(){
//返回‘ok'
resolve('ok');
},time);
})
};
varstart=asyncfunction(){
letresult=awaitsleep(3000);
console.log(result);//收到‘ok'
};
捕捉错误
既然.then(..)不用写了，那么.catch(..)也不用写，可以直接用标准的trycatch语法捕捉错误。
varsleep=function(time){
returnnewPromise(function(resolve,reject){
setTimeout(function(){
//模拟出错了，返回‘error'
reject('error');
},time);
})
};
varstart=asyncfunction(){
try{
console.log('start');
awaitsleep(3000);//这里得到了一个返回错误
//所以以下代码不会被执行了
console.log('end');
}catch(err){
console.log(err);//这里捕捉到错误`error`
}
};
循环多个await
await看起来就像是同步代码，所以可以理所当然的写在for循环里，不必担心以往需要闭包才能解决的问题。
..省略以上代码
varstart=asyncfunction(){
for(vari=1;i<=10;i++){
console.log(`当前是第${i}次等待..`);
awaitsleep(1000);
}
};
值得注意的是，await必须在async函数的上下文中的。
..省略以上代码
letone2ten=[1,2,3,4,5,6,7,8,9,10];
//错误示范
one2ten.forEach(function(v){
console.log(`当前是第${v}次等待..`);
awaitsleep(1000);//错误!!await只能在async函数中运行
});
//正确示范
for(varvofone2ten){
console.log(`当前是第${v}次等待..`);
awaitsleep(1000);//正确,for循环的上下文还在async函数中
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。