let count = ()=>{ return new Promise((resolve,reject) => { setTimeout(()=>{ reject('故意抛出错误'); },500); }); } let list = ()=>{ return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve([1,2,3]); },500); }); } let getList = async ()=>{ let c = await count(); let l = await list(); 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()有个“先后顺序”，即我们先查的总数，然后又查的列表。其实，这两个操作并无先后关联性，我们可以异步的同时进行查询，然后等到所有结果都返回时再拼装数据即可。
let count = ()=>{ return new Promise((resolve,reject) => { setTimeout(()=>{ resolve(100); },500); }); } let list = ()=>{ return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve([1,2,3]); },500); }); } let getList = async ()=>{ let result = await Promise.all([count(),list()]); return result; } 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 之后，我们就可以这样实现了：
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); } })();
async 函数的用法