async是es7的。 async和await是ES7中新增內容，是對於非同步操作的解決方案；async/await可以說是co模組和生成器函數的語法糖，用更清晰的語意解決js非同步程式碼。 async顧名思義是「非同步」的意思，async用於聲明一個函數是異步的；async和await有一個嚴格規定，兩者都離不開對方，且await只能寫在async函數中。
本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。
ES7（ES2017）中提出的前端非同步特性：async、await。
async和await是ES7中新增內容，對於非同步操作的解決方案，async/await可以說是co模組和生成器函數的語法糖。用更清晰的語意解決js異步程式碼。
async顧名思義是「非同步」的意思，async用來宣告一個函數是異步的。而await從字面意思上是「等待」的意思，就是用來等待非同步完成。
async和await它們兩有一個嚴格規定，兩者都離不開對方，但是，await只能寫在async函數中。
熟悉co模組的同學應該都知道，co模組是TJ大神寫的一個使用生成器函數來解決非同步流程的模組，可以看做是生成器函數的執行器。而async/await則是對co模組的升級，內建生成器函數的執行器，不再依賴co模組。同時，async返回的是Promise。
從上面來看，不管是co模組還是async/await，都是將Promise作為最基礎的單元，對Promise不很了解的同學可以先深入了解Promise。
#下面我們使用一個簡單的例子，來比較一下三種方式的異同，以及取捨。
我們採用mongodb的nodejs驅動，查詢mongodb資料庫作為例子，原因是mongodb的js驅動程式已經預設實作了回傳Promise，而不用我們單獨去包裝Promise了。
MongoClient.connect(url + db_name).then(db => { return db.collection('blogs'); }).then(coll => { return coll.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 => { let coll = 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 => { return result.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模块搭配生成器函数，那么上面的例子可以改写如下：
const co = require('co'); co(function* (){ let db = yield MongoClient.connect(url + db_name); let coll = db.collection('blogs'); let blogs = yield coll.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 function(){ let db = await MongoClient.connect(url + db_name); let coll = db.collection('blogs'); let blogs = await coll.find().toArray(); console.log(blogs.length); db.close(); })().catch(err => { console.log(err); });
我们对比代码可以看出，async/await和co两种方式代码极为相似。co换成了async，yield换成了await。同时生成器函数变成了普通函数。这种方式在语义上更加清晰明了，async表明这个函数是异步的，同时await表示要“等待”异步操作返回值。
async函数返回一个Promise，上面的代码其实是这样：
let getBlogs = async function(){ let db = await MongoClient.connect(url + db_name); let coll = db.collection('blogs'); let blogs = await coll.find().toArray(); db.close(); return blogs; }; getBlogs().then(result => { console.log(result.length); }).catch(err => { console.log(err); })
我们定义getBlogs为一个async函数，最后返回得到的博客列表最终会被包装成一个Promise返回，如上，我们直接调用getBlogs().then()方法可获取async函数返回值。
好了，上面我们简单对比了一下三种解决异步方案，下面我们来深入了解一下async/await。
async用于定义一个异步函数，该函数返回一个Promise。
如果async函数返回的是一个同步的值，这个值将被包装成一个理解resolve的Promise，等同于return Promise.resolve(value)。
await用于一个异步操作之前，表示要“等待”这个异步操作的返回值。await也可以用于一个同步的值。
//返回一个Promise let timer = async function timer(){ return new Promise((resolve,reject) => { setTimeout(() => { resolve('500'); },500); }); } timer().then(result => { console.log(result); //500 }).catch(err => { console.log(err.message); });
//返回一个同步的值 let sayHi = async function sayHi(){ let hi = await 'hello world'; return hi; //等同于return Promise.resolve(hi); } sayHi().then(result => { console.log(result); });
上面这个例子返回是一个同步的值，字符串’hello world’，sayHi()是一个async函数，返回值被包装成一个Promise，可以调用then()方法获取返回值。对于一个同步的值，可以使用await，也可以不使用await。效果效果是一样的。具体用不用，看情况。
比如上面使用mongodb查询博客那个例子，let coll = db.collection('blogs');，这里我们就没有用await，因为这是一个同步的值。当然，也可以使用await，这样会显得代码统一。虽然效果是一样的。
let sayHi = async function sayHi(){ throw new Error('出错了'); } sayHi().then(result => { console.log(result); }).catch(err => { console.log(err.message); //出错了 });
我们直接在async函数中抛出一个异常，由于返回的是一个Promise，因此，这个异常可以调用返回Promise的catch()方法捕捉到。
和Promise链的对比：
我们的async函数中可以包含多个异步操作，其异常和Promise链有相同之处，如果有一个Promise被reject()那么后面的将不会再进行。
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影片教學】
#以上是async是es6還是es7的的詳細內容。更多資訊請關注PHP中文網其他相關文章！
