從async await promise理解微任務(wù)和宏任務(wù)

1.理解概念:

執(zhí)行順序: "主線任務(wù) -> a微任務(wù) -> b宏任務(wù) "的規(guī)則辩蛋。在執(zhí)行過(guò)程中技健,微任務(wù)的優(yōu)先級(jí)高于宏任務(wù) 注意如果產(chǎn)生嵌套時(shí):則生成第二套微任務(wù)骄呼、宏任務(wù)菇夸,保證第一套微任務(wù)宏任務(wù)執(zhí)行完才執(zhí)行第二套
常見的微任務(wù):
Promises: 使用 Promise.resolve()琼富、Promise.reject()、new Promise() 等方式創(chuàng)建的 Promise 對(duì)象庄新。
Mutation Observer: 監(jiān)聽 DOM 的變化并在變化發(fā)生時(shí)執(zhí)行的微任務(wù)鞠眉。
process.nextTick: 用于在 Node.js 中添加微任務(wù)的方法。
queueMicrotask: 用于在現(xiàn)代瀏覽器中添加微任務(wù)的方法择诈。
async await

常見的宏任務(wù):

setTimeout 和 setInterval: 設(shè)置定時(shí)器的方法械蹋。
I/O 操作: 包括網(wǎng)絡(luò)請(qǐng)求、文件讀寫等涉及到輸入輸出的任務(wù)羞芍。
UI 渲染: 瀏覽器渲染頁(yè)面的任務(wù)哗戈,如繪制、布局等荷科。
requestAnimationFrame: 用于在瀏覽器重繪之前執(zhí)行的任務(wù)唯咬。

2.理解 async await

async 定義一個(gè)函數(shù)A,A內(nèi)部執(zhí)行 await B();其中await會(huì)暫停A當(dāng)中 await B()畏浆;的后續(xù)內(nèi)容副渴,等待B()才將await B()后續(xù)內(nèi)容加入微任務(wù)隊(duì)列。

3.promise的 then() 是同步任務(wù)

4.實(shí)例

定義方法:

async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}

async function async2() {
  console.log('async2');
}


執(zhí)行:

setTimeout(function() {
  console.log('settimeout');
});
async1();
new Promise(function(resolve) {
  console.log('promise1');
  resolve();
}).then(function() {
  console.log('promise2');
})

分析:沿著主線任務(wù)執(zhí)行分別如下:
第一輪主線任務(wù):
setTimeout——宏任務(wù)全度,加入宏任務(wù)隊(duì)列,
setTimeout—— 先執(zhí)行console.log('async1 start'), 遇到同步任務(wù) await async2(); async2() 加入微任務(wù)隊(duì)列斥滤; 后續(xù)代碼得等到 async2() 執(zhí)行完才加入微任務(wù)隊(duì)列;
繼續(xù)主線将鸵,Promise加入微任務(wù)隊(duì)列

微任務(wù)的隊(duì)列:先執(zhí)行 async2() {console.log('async2');}勉盅,完成后將console.log('async1 end');加入微任務(wù)隊(duì)列,注意這里第一輪時(shí)promise先加入微任務(wù)隊(duì)列的顶掉,先執(zhí)行promise代碼草娜,后執(zhí)行 console.log('async1 end');
最后執(zhí)行宏任務(wù),
結(jié)果:

async1 start  
async2  
promise1 
promise2  
async1 end 
settimeout
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末痒筒,一起剝皮案震驚了整個(gè)濱河市宰闰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌簿透,老刑警劉巖移袍,帶你破解...
    沈念sama閱讀 222,252評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異老充,居然都是意外死亡葡盗,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門啡浊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)觅够,“玉大人,你說(shuō)我怎么就攤上這事巷嚣〈龋” “怎么了?”我有些...
    開封第一講書人閱讀 168,814評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵廷粒,是天一觀的道長(zhǎng)窘拯。 經(jīng)常有香客問(wèn)我,道長(zhǎng)评雌,這世上最難降的妖魔是什么树枫? 我笑而不...
    開封第一講書人閱讀 59,869評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮景东,結(jié)果婚禮上砂轻,老公的妹妹穿的比我還像新娘。我一直安慰自己斤吐,他們只是感情好搔涝,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,888評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著和措,像睡著了一般庄呈。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上派阱,一...
    開封第一講書人閱讀 52,475評(píng)論 1 312
  • 那天诬留,我揣著相機(jī)與錄音,去河邊找鬼。 笑死文兑,一個(gè)胖子當(dāng)著我的面吹牛盒刚,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播绿贞,決...
    沈念sama閱讀 41,010評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼因块,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了籍铁?” 一聲冷哼從身側(cè)響起涡上,我...
    開封第一講書人閱讀 39,924評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎拒名,沒(méi)想到半個(gè)月后吩愧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,469評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡靡狞,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,552評(píng)論 3 342
  • 正文 我和宋清朗相戀三年耻警,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片甸怕。...
    茶點(diǎn)故事閱讀 40,680評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡甘穿,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出梢杭,到底是詐尸還是另有隱情温兼,我是刑警寧澤,帶...
    沈念sama閱讀 36,362評(píng)論 5 351
  • 正文 年R本政府宣布武契,位于F島的核電站募判,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏咒唆。R本人自食惡果不足惜届垫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,037評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望全释。 院中可真熱鬧装处,春花似錦、人聲如沸浸船。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,519評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)李命。三九已至登淘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間封字,已是汗流浹背黔州。 一陣腳步聲響...
    開封第一講書人閱讀 33,621評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工耍鬓, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人辩撑。 一個(gè)月前我還...
    沈念sama閱讀 49,099評(píng)論 3 378
  • 正文 我出身青樓界斜,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親合冀。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,691評(píng)論 2 361

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