您好,登錄后才能下訂單哦!
async與await方法怎么在ES7中使用?針對(duì)這個(gè)問(wèn)題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
async/await是什么
async/await可以說(shuō)是co模塊和生成器函數(shù)的語(yǔ)法糖。用更加清晰的語(yǔ)義解決js異步代碼。
熟悉co模塊的同學(xué)應(yīng)該都知道,co模塊是TJ大神寫(xiě)的一個(gè)使用生成器函數(shù)來(lái)解決異步流程的模塊,可以看做是生成器函數(shù)的執(zhí)行器。而async/await則是對(duì)co模塊的升級(jí),內(nèi)置生成器函數(shù)的執(zhí)行器,不再依賴co模塊。同時(shí),async返回的是Promise。
從上面來(lái)看,不管是co模塊還是async/await,都是將Promise作為最基礎(chǔ)的單元,對(duì)Promise不很了解的同學(xué)可以先深入了解一下Promise。
對(duì)比Promise,co,async/await
下面我們使用一個(gè)簡(jiǎn)單的例子,來(lái)對(duì)比一下三種方式的異同,以及取舍。
我們采用mongodb的nodejs驅(qū)動(dòng),查詢mongodb數(shù)據(jù)庫(kù)作為例子,原因是mongodb的js驅(qū)動(dòng)已經(jīng)默認(rèn)實(shí)現(xiàn)了返回Promise,而不用我們單獨(dú)去包裝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()方法可以返回另一個(gè)Promise,也可以返回一個(gè)同步的值,如果返回的是一個(gè)同步值,將會(huì)被包裝成一個(gè)Promise。
上面的例子中,db.collection()將返回一個(gè)同步的值,即集合對(duì)象,但是被包裝成Promise,將會(huì)透?jìng)鞯较乱粋€(gè)then()方法。
上面一個(gè)例子,是使用的Promise鏈。
先連接數(shù)據(jù)庫(kù)MongoClient.connect()返回一個(gè)Promise,然后在then()方法里獲得數(shù)據(jù)庫(kù)對(duì)象db,然后再獲取到coll對(duì)象再返回。在下一個(gè)then()方法獲得coll對(duì)象,然后進(jìn)行查詢,查詢結(jié)果返回,逐層調(diào)用then()方法,形成一個(gè)Promise鏈。
在這個(gè)Promise鏈上,如果任何一個(gè)環(huán)節(jié)出現(xiàn)異常,都會(huì)被最后的catch()捕捉到。
可以說(shuō),這個(gè)使用Promise鏈寫(xiě)的代碼,比層層調(diào)用回調(diào)函數(shù)更優(yōu)雅,流程也更明確。先獲得數(shù)據(jù)庫(kù)對(duì)象,再獲得集合對(duì)象,最后查詢數(shù)據(jù)。
但是這里有個(gè)不怎么“優(yōu)雅”的問(wèn)題,在于,每一個(gè)then()方法獲取的對(duì)象,都是上一個(gè)then()方法返回的數(shù)據(jù)。而不能跨層訪問(wèn)。
什么意思,就是說(shuō)在第三個(gè)then(blogs => {})中我們只能獲取到查詢的結(jié)果blogs,而不能使用上面的db對(duì)象和coll對(duì)象。這個(gè)時(shí)候,如果要打印出blogs列表后,要關(guān)閉數(shù)據(jù)庫(kù)db.close()怎么辦?
這個(gè)時(shí)候,可以兩種解決方法:
第一種是,使用then()嵌套。我們將Promise鏈打斷,使之嵌套,猶如使用回調(diào)函數(shù)的嵌套一般:
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); })
這里我們將兩個(gè)Promise嵌套,這樣在最后一個(gè)查詢操作里面,就可以調(diào)用外面的db對(duì)象了。但是這中方式,并不推薦。原因很簡(jiǎn)單,我們從一種回調(diào)函數(shù)地獄走向了另一種Promise回調(diào)地獄。
而且,我們要對(duì)每個(gè)Promise的異常進(jìn)行捕捉,因?yàn)镻romise沒(méi)有形成鏈。
還有一種方式, 是在每個(gè)then()方法里都將db傳過(guò)來(lái):
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()返回的是一個(gè)Promise,因此這里需要再解析一層 return {db:result.db,blogs:blogs} }) }).then(result=> { console.log(result.blogs.length); result.db.close(); }).catch(err=> { console.log(err); });
我們?cè)诿總€(gè)then()方法的返回中,都將db及其每次的其他結(jié)果組成一個(gè)對(duì)象返回。請(qǐng)注意,如果每次的結(jié)果都是一個(gè)同步的值還好說(shuō),但是如果是一個(gè)Promise值,每一個(gè)Promise都需要多做一層解析。
例如上面的一個(gè)例子,第二個(gè)then()方法返回的 {db:result.db,blogs:result.coll.find().toArray()} 對(duì)象中, blogs 是一個(gè)Promise,在下一個(gè)then()方法中,我們無(wú)法直接引用博客列表數(shù)組值,因此需要先調(diào)用then()方法解析一層,然后將兩個(gè)同步值db和blogs返回。
注意,這里涉及到了Promise的嵌套,不過(guò)一個(gè)Promise只嵌套一層then()。
這種方式,也是很蛋疼的一個(gè)方式,因?yàn)槿绻龅絫hen()方法中返回的不是同步的值,而是Promise的話,我們需要多做很多工作。而且,每次都透?jìng)饕粋€(gè)“多余”的db對(duì)象,在邏輯上也有點(diǎn)冗余。
但除此之外,對(duì)于Promise鏈的使用,如果遇到上面的問(wèn)題,好像也沒(méi)其他更好的方法解決了。我們只能根據(jù)場(chǎng)景去選擇一種“最優(yōu)”的方案,如果要使用Promise鏈的話。
鑒于Promise上面蛋疼的問(wèn)題,TJ大神將ES6中的生成器函數(shù),用co模塊包裝了一下,以更優(yōu)雅的方式來(lái)解決上面的問(wèn)題。
co搭配生成器函數(shù)
如果使用co模塊搭配生成器函數(shù),那么上面的例子可以改寫(xiě)如下:
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是一個(gè)函數(shù),將接受一個(gè)生成器函數(shù)作為參數(shù),去執(zhí)行這個(gè)生成器函數(shù)。生成器函數(shù)中使用 yield 關(guān)鍵字來(lái)“同步”獲取每個(gè)異步操作的值。
上面代碼在代碼形式上,比上面使用Promise鏈要優(yōu)雅,我們消滅了回調(diào)函數(shù),代碼看起來(lái)都是同步的。除了使用co和yield有點(diǎn)怪之外。
使用co模塊,我們要將所有的操作包裝成一個(gè)生成器函數(shù),然后使用co()去調(diào)用這個(gè)生成器函數(shù)??瓷先ヒ策€可以接受,但是ES的進(jìn)化是不滿足于此的,于是async/await被提到了ES7的提案。
async/await
我們先看一下使用async/await改寫(xiě)上面的代碼:
(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); });
我們對(duì)比代碼可以看出,async/await和co兩種方式代碼極為相似。
co換成了async,yield換成了await。同時(shí)生成器函數(shù)變成了普通函數(shù)。
這種方式在語(yǔ)義上更加清晰明了,async表明這個(gè)函數(shù)是異步的,同時(shí)await表示要“等待”異步操作返回值。
async函數(shù)返回一個(gè)Promise,上面的代碼其實(shí)是這樣:
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為一個(gè)async函數(shù),最后返回得到的博客列表最終會(huì)被包裝成一個(gè)Promise返回,如上,我們直接調(diào)用getBlogs().then()方法可獲取async函數(shù)返回值。
好了,上面我們簡(jiǎn)單對(duì)比了一下三種解決異步方案,下面我們來(lái)深入了解一下async/await。
深入async/await
async返回值
async用于定義一個(gè)異步函數(shù),該函數(shù)返回一個(gè)Promise。
如果async函數(shù)返回的是一個(gè)同步的值,這個(gè)值將被包裝成一個(gè)理解resolve的Promise,等同于return Promise.resolve(value)
。
await用于一個(gè)異步操作之前,表示要“等待”這個(gè)異步操作的返回值。await也可以用于一個(gè)同步的值。
//返回一個(gè)Promise let timer = async functiontimer(){ return new Promise((resolve,reject) => { setTimeout(()=> { resolve('500'); },500); }); } timer().then(result=> { console.log(result); //500 }).catch(err=> { console.log(err.message); });
//返回一個(gè)同步的值 let sayHi = async functionsayHi(){ let hi = await 'hello world'; return hi; //等同于return Promise.resolve(hi); } sayHi().then(result=> { console.log(result); });
上面這個(gè)例子返回是一個(gè)同步的值,字符串'hello world',sayHi()是一個(gè)async函數(shù),返回值被包裝成一個(gè)Promise,可以調(diào)用then()方法獲取返回值。
對(duì)于一個(gè)同步的值,可以使用await,也可以不使用await。效果效果是一樣的。具體用不用,看情況。
比如上面使用mongodb查詢博客那個(gè)例子, let coll = db.collection('blogs'); ,這里我們就沒(méi)有用await,因?yàn)檫@是一個(gè)同步的值。當(dāng)然,也可以使用await,這樣會(huì)顯得代碼統(tǒng)一。雖然效果是一樣的。
async函數(shù)的異常
let sayHi = async functionsayHi(){ throw new Error('出錯(cuò)了'); } sayHi().then(result=> { console.log(result); }).catch(err=> { console.log(err.message); //出錯(cuò)了 });
我們直接在async函數(shù)中拋出一個(gè)異常,由于返回的是一個(gè)Promise,因此,這個(gè)異??梢哉{(diào)用返回Promise的catch()方法捕捉到。
和Promise鏈的對(duì)比:
我們的async函數(shù)中可以包含多個(gè)異步操作,其異常和Promise鏈有相同之處,如果有一個(gè)Promise被reject()那么后面的將不會(huì)再進(jìn)行。
let count = ()=>{ return new Promise((resolve,reject) => { setTimeout(()=>{ reject('故意拋出錯(cuò)誤'); },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 //故意拋出錯(cuò)誤
如上面的代碼,定義兩個(gè)異步操作,count和list,使用setTimeout延時(shí)500毫秒,count故意直接拋出異常,從輸出結(jié)果來(lái)看,count()拋出異常后,直接由catch()捕捉到了,list()并沒(méi)有繼續(xù)執(zhí)行。
并行
使用async后,我們上面的例子都是串行的。比如上個(gè)list()和count()的例子,我們可以將這個(gè)例子用作分頁(yè)查詢數(shù)據(jù)的場(chǎng)景。
先查詢出數(shù)據(jù)庫(kù)中總共有多少條記錄,然后再根據(jù)分頁(yè)條件查詢分頁(yè)數(shù)據(jù),最后返回分頁(yè)數(shù)據(jù)以及分頁(yè)信息。
我們上面的例子count()和list()有個(gè)“先后順序”,即我們先查的總數(shù),然后又查的列表。其實(shí),這兩個(gè)操作并無(wú)先后關(guān)聯(lián)性,我們可以異步的同時(shí)進(jìn)行查詢,然后等到所有結(jié)果都返回時(shí)再拼裝數(shù)據(jù)即可。
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()“同時(shí)”執(zhí)行,這里count()和list()可以看作是“并行”執(zhí)行的,所耗時(shí)間將是兩個(gè)異步操作中耗時(shí)最長(zhǎng)的耗時(shí)。
最后得到的結(jié)果是兩個(gè)操作的結(jié)果組成的數(shù)組。我們只需要按照順序取出數(shù)組中的值即可。
JavaScript 中最蛋疼的事情莫過(guò)于回調(diào)函數(shù)嵌套問(wèn)題。以往在瀏覽器中,因?yàn)榕c服務(wù)器通訊是一種比較昂貴的操作,因此比較復(fù)雜的業(yè)務(wù)邏輯往往都放在服務(wù)器端,前端 JavaScript 只需要少數(shù)幾次 AJAX 請(qǐng)求就可拿到全部數(shù)據(jù)。
但是到了 webapp 風(fēng)行的時(shí)代,前端業(yè)務(wù)邏輯越來(lái)越復(fù)雜,往往幾個(gè) AJAX 請(qǐng)求之間互有依賴,有些請(qǐng)求依賴前面請(qǐng)求的數(shù)據(jù),有些請(qǐng)求需要并行進(jìn)行。還有在類似 Node.js 的后端 JavaScript 環(huán)境中,因?yàn)樾枰M(jìn)行大量 IO 操作,問(wèn)題更加明顯。這個(gè)時(shí)候使用回調(diào)函數(shù)來(lái)組織代碼往往會(huì)導(dǎo)致代碼難以閱讀。
現(xiàn)在比較流行的解決這個(gè)問(wèn)題的方法是使用 Promise,可以將嵌套的回調(diào)函數(shù)展平。但是寫(xiě)代碼和閱讀依然有額外的負(fù)擔(dān)。
另外一個(gè)方案是使用 ES6 中新增的 generator,因?yàn)?generator 的本質(zhì)是可以將一個(gè)函數(shù)執(zhí)行暫停,并保存上下文,再次調(diào)用時(shí)恢復(fù)當(dāng)時(shí)的狀態(tài)。co 模塊是個(gè)不錯(cuò)的封裝。但是這樣略微有些濫用 generator 特性的感覺(jué)。
ES7 中有了更加標(biāo)準(zhǔn)的解決方案,新增了 async/await 兩個(gè)關(guān)鍵詞。async 可以聲明一個(gè)異步函數(shù),此函數(shù)需要返回一個(gè) Promise 對(duì)象。await可以等待一個(gè) Promise 對(duì)象 resolve,并拿到結(jié)果。
比如下面的例子,以往我們無(wú)法在 JavaScript 中使用常見(jiàn)的 sleep 函數(shù),只能使用 setTimeout 來(lái)注冊(cè)一個(gè)回調(diào)函數(shù),在指定的時(shí)間之后再執(zhí)行。有了 async/await 之后,我們就可以這樣實(shí)現(xiàn)了:
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()); })();
執(zhí)行此段代碼,可以在終端中看到結(jié)果:
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 函數(shù)可以正常的返回結(jié)果和拋出異常。await 函數(shù)調(diào)用即可拿到結(jié)果,在外面包上 try/catch 就可以捕獲異常。下面是一個(gè)從豆瓣 API 獲取數(shù)據(jù)的例子:
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 函數(shù)的用法
同 Generator 函數(shù)一樣,async 函數(shù)返回一個(gè) Promise 對(duì)象,可以使用 then 方法添加回調(diào)函數(shù)。當(dāng)函數(shù)執(zhí)行的時(shí)候,一旦遇到 await 就會(huì)先返回,等到觸發(fā)的異步操作完成,再接著執(zhí)行函數(shù)體內(nèi)后面的語(yǔ)句。
下面是一個(gè)例子。
async function getStockPriceByName(name) { var symbol = await getStockSymbol(name); var stockPrice = await getStockPrice(symbol); return stockPrice; } getStockPriceByName('goog').then(function (result){ console.log(result); });
閱讀本文前,期待您對(duì)promise和ES6(ECMA2015)有所了解,會(huì)更容易理解。本文以體驗(yàn)為主,不會(huì)深入說(shuō)明,結(jié)尾有詳細(xì)的文章引用。
第一個(gè)例子
Async/Await應(yīng)該是目前最簡(jiǎn)單的異步方案了,首先來(lái)看個(gè)例子。這里我們要實(shí)現(xiàn)一個(gè)暫停功能,輸入N毫秒,則停頓N毫秒后才繼續(xù)往下執(zhí)行。
var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () { resolve(); }, time); }) }; var start = async function () { // 在這里使用起來(lái)就像同步代碼那樣直觀 console.log('start'); await sleep(3000); console.log('end'); }; start();
控制臺(tái)先輸出start,稍等3秒后,輸出了end。
基本規(guī)則
async 表示這是一個(gè)async函數(shù),await只能用在這個(gè)函數(shù)里面。await表示在這里等待promise返回結(jié)果了,再繼續(xù)執(zhí)行。await 后面跟著的應(yīng)該是一個(gè)promise對(duì)象(當(dāng)然,其他返回值也沒(méi)關(guān)系,只是會(huì)立即執(zhí)行,不過(guò)那樣就沒(méi)有意義了…)
獲得返回值
await等待的雖然是promise對(duì)象,但不必寫(xiě).then(..),直接可以得到返回值。
var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () { // 返回 ‘ok' resolve('ok'); }, time); }) }; var start = async function () { let result = await sleep(3000); console.log(result); // 收到 ‘ok' };
捕捉錯(cuò)誤
既然.then(..)不用寫(xiě)了,那么.catch(..)也不用寫(xiě),可以直接用標(biāo)準(zhǔn)的try catch語(yǔ)法捕捉錯(cuò)誤。
var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () { // 模擬出錯(cuò)了,返回 ‘error' reject('error'); }, time); }) }; var start = async function () { try { console.log('start'); await sleep(3000); // 這里得到了一個(gè)返回錯(cuò)誤 // 所以以下代碼不會(huì)被執(zhí)行了 console.log('end'); } catch (err) { console.log(err); // 這里捕捉到錯(cuò)誤 `error` } };
循環(huán)多個(gè)await
await看起來(lái)就像是同步代碼,所以可以理所當(dāng)然的寫(xiě)在for循環(huán)里,不必?fù)?dān)心以往需要閉包才能解決的問(wèn)題。
..省略以上代碼 var start = async function () { for (var i = 1; i <= 10; i++) { console.log(`當(dāng)前是第${i}次等待..`); await sleep(1000); } };
值得注意的是,await必須在async函數(shù)的上下文中的。
..省略以上代碼 let one2ten = [1,2,3,4,5,6,7,8,9,10]; // 錯(cuò)誤示范 one2ten.forEach(function (v) { console.log(`當(dāng)前是第${v}次等待..`); await sleep(1000); // 錯(cuò)誤!! await只能在async函數(shù)中運(yùn)行 }); // 正確示范 for(var v of one2ten) { console.log(`當(dāng)前是第${v}次等待..`); await sleep(1000); // 正確, for循環(huán)的上下文還在async函數(shù)中 }
關(guān)于async與await方法怎么在ES7中使用問(wèn)題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒(méi)有解開(kāi),可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。