async和await搭配使用

async

異步關(guān)鍵字土匀,一般我們把這個(gè)關(guān)鍵字寫在函數(shù)前,用于表示函數(shù)是一個(gè)異步函數(shù)形用, 異步函數(shù)也就意味著該函數(shù)的執(zhí)行不會阻塞后面代碼的執(zhí)行就轧。

聲明async函數(shù)的幾個(gè)方法:

  • 普通的函數(shù)聲明
async function A(){}
  • 聲明一個(gè)函數(shù)表達(dá)式
let A = async function(){}
  • async形式的箭頭函數(shù)
let A = async ()=>{}

異步函數(shù)調(diào)用也跟普通函數(shù)調(diào)用一樣

async function A(){}
console.log(A());
console.log('雖然在后面,但是我先執(zhí)行');
結(jié)果

我們可以看到田度,異步函數(shù)是不會阻塞下面代碼的執(zhí)行妒御,并且異步函數(shù)返回了一個(gè)promise 對象,promise 對象是可以返回值和拋出錯(cuò)誤的:

async function A(val){
    if (val) {
        return '123'
    } else {
        throw '錯(cuò)誤'
    }
}
console.log(A(true));
console.log(A(false));
結(jié)果

再使用then和catch捕獲返回值和錯(cuò)誤信息镇饺。

await

等待關(guān)鍵字乎莉,意思是等待,等待后面的表達(dá)式執(zhí)行完再繼續(xù)執(zhí)行下面的代碼奸笤,這個(gè)作用的好處就是能大大減少回調(diào)地獄惋啃。后面可以放置任何表達(dá)式,但是更多的是放一個(gè)返回promise 對象的表達(dá)式监右。注意await 關(guān)鍵字只能放到async 函數(shù)里面边灭。

舉個(gè)例子,有個(gè)場景健盒,需要調(diào)用a方法調(diào)取接口數(shù)據(jù)绒瘦,等到獲取數(shù)據(jù)之后再執(zhí)行b方法,如果這時(shí)候不使用await扣癣,那就是需要編寫回調(diào)方法椭坚,當(dāng)我們再多幾步這樣的操作就很容易陷入回調(diào)地獄。

a(() => {

 b(() => {

   c();

 });

});
await a();

await b();

c();

修改代碼后確實(shí)簡潔很多搏色,但是如果濫用也很造成性能問題善茎,如果ac方法是并行的,簡單粗暴使用await會拉低整體執(zhí)行的時(shí)間频轿。

a(() => {
 b();
});

c(() => {
 d();
});

// 改為

await a();
b();

await c();
d();

改了之后雖然看起來是b等待a執(zhí)行完垂涯,d等待c執(zhí)行完,但是實(shí)際上d需要等ac都執(zhí)行完才能執(zhí)行航邢,白白增加了等待的時(shí)長耕赘。
這種情況需要使用Promise.all()或者把兩個(gè)執(zhí)行完全隔離開來。

所以膳殷,await的使用也需要考慮具體的執(zhí)行邏輯操骡。

我們再來看一個(gè)串行并行的情況:

async function asyncAwaitFn(str) {
    return await new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(str)
        }, 1000);
    })
}

const serialFn = async () => { //串行執(zhí)行

    console.time('test')
    console.log(await asyncAwaitFn('string 1'));
    console.log(await asyncAwaitFn('string 2'));
    console.timeEnd('test')
}

serialFn();
串行
async function asyncAwaitFn(str) {
    return await new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(str)
        }, 1000);
    })
}
const zhix= async () => { //并行執(zhí)行
    console.time('zhix')
    const test1 = asyncAwaitFn('string 1');
    const test2 = asyncAwaitFn('string 2')

    //直接打印
    console.log(await test1)
    console.log(await test2)
    console.timeEnd('zhix')
}
zhix()
并行

相比串行,并行執(zhí)行的效率快了差不多一倍。如果多個(gè)串行執(zhí)行改為并行册招,能大大提升執(zhí)行速度岔激。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市是掰,隨后出現(xiàn)的幾起案子虑鼎,更是在濱河造成了極大的恐慌,老刑警劉巖键痛,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件炫彩,死亡現(xiàn)場離奇詭異,居然都是意外死亡絮短,警方通過查閱死者的電腦和手機(jī)江兢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來丁频,“玉大人杉允,你說我怎么就攤上這事∠薷” “怎么了夺颤?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵痢缎,是天一觀的道長胁勺。 經(jīng)常有香客問我,道長独旷,這世上最難降的妖魔是什么署穗? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮嵌洼,結(jié)果婚禮上案疲,老公的妹妹穿的比我還像新娘。我一直安慰自己麻养,他們只是感情好褐啡,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鳖昌,像睡著了一般备畦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上许昨,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天懂盐,我揣著相機(jī)與錄音,去河邊找鬼糕档。 笑死莉恼,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播俐银,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼尿背,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了悉患?” 一聲冷哼從身側(cè)響起残家,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎售躁,沒想到半個(gè)月后坞淮,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡陪捷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年回窘,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片市袖。...
    茶點(diǎn)故事閱讀 38,161評論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡啡直,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出苍碟,到底是詐尸還是另有隱情酒觅,我是刑警寧澤,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布微峰,位于F島的核電站舷丹,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蜓肆。R本人自食惡果不足惜颜凯,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望仗扬。 院中可真熱鬧症概,春花似錦、人聲如沸早芭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽退个。三九已至募壕,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間帜乞,已是汗流浹背司抱。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留黎烈,地道東北人习柠。 一個(gè)月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓匀谣,卻偏偏與公主長得像,于是被迫代替她去往敵國和親资溃。 傳聞我的和親對象是個(gè)殘疾皇子武翎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內(nèi)容