JavaScript宏觀任務(wù)和微觀任務(wù)

JavaScript代碼在執(zhí)行的時(shí)候,可以說(shuō)就是拿一段代碼給到JavaScript引擎并去執(zhí)行忘分,此外還可能會(huì)提供額外的API給到JavaScript引擎。

在ES3 或者 更早的版本中,JavaScript并無(wú)異步操作,所以代碼給到JavaScript引擎栅螟,它就直接順次的執(zhí)行,這個(gè)任務(wù)是宿主發(fā)起的任務(wù)我們可以稱之為宏觀任務(wù)(macrotask)篱竭。

在ES5 或者 之后的版本力图,JavaScript出現(xiàn)了Promise,這就不需要瀏覽器的安排掺逼,引擎自己也可以發(fā)起任務(wù)吃媒,這個(gè)任務(wù)就叫做微觀任務(wù)(microtask)

image.png

Promise
MDN解釋:Promise 對(duì)象用于表示一個(gè)異步操作的最終狀態(tài)(完成或失敗),以及該異步操作的結(jié)果值晓折。
基本用法:

    function sleep(duration) {
        return new Promise(function(resolve, reject) {
            setTimeout(resolve,duration);
        })
    }
    sleep(1000)
      .then( ()=> console.log("then"))
      .catch( ()=> console.log('catch') )
      .finally( () =>  console.log('finally'));

Promise.prototype.catch(onRejected)
添加一個(gè)拒絕(rejection) 回調(diào)到當(dāng)前 promise, 返回一個(gè)新的promise惑朦。當(dāng)這個(gè)回調(diào)函數(shù)被調(diào)用,新 promise 將以它的返回值來(lái)resolve漓概,否則如果當(dāng)前promise 進(jìn)入fulfilled狀態(tài),則以當(dāng)前promise的完成結(jié)果作為新promise的完成結(jié)果.

Promise.prototype.then(onFulfilled, onRejected)
添加解決(fulfillment)和拒絕(rejection)回調(diào)到當(dāng)前 promise, 返回一個(gè)新的 promise, 將以回調(diào)的返回值來(lái)resolve.

Promise.prototype.finally(onFinally)
添加一個(gè)事件處理回調(diào)于當(dāng)前promise對(duì)象病梢,并且在原promise對(duì)象解析完畢后胃珍,返回一個(gè)新的promise對(duì)象◎涯埃回調(diào)會(huì)在當(dāng)前promise運(yùn)行完畢后被調(diào)用觅彰,無(wú)論當(dāng)前promise的狀態(tài)是完成(fulfilled)還是失敗(rejected)

    function sleep(duration) {
        return new Promise(function(resolve, reject) {
            console.log("b");
            setTimeout(resolve,duration);
        })
    }
    console.log("a");
    sleep(5000).then(()=>console.log("c"));

setTimeout 是屬于宿主環(huán)境的api,屬于宏觀任務(wù)钮热,所以可以分析為兩個(gè)宏觀任務(wù)填抬,但是setTimeout中帶有一個(gè)微觀任務(wù)。所以執(zhí)行結(jié)果為a b c

async/await
當(dāng)調(diào)用一個(gè) async 函數(shù)時(shí)隧期,會(huì)返回一個(gè) Promise 對(duì)象飒责。當(dāng)這個(gè) async 函數(shù)返回一個(gè)值時(shí),Promise 的 resolve 方法會(huì)負(fù)責(zé)傳遞這個(gè)值仆潮;當(dāng) async 函數(shù)拋出異常時(shí)宏蛉,Promise 的 reject 方法也會(huì)傳遞這個(gè)異常值。

async 函數(shù)中可能會(huì)有 await 表達(dá)式性置,這會(huì)使 async 函數(shù)暫停執(zhí)行拾并,等待 Promise 的結(jié)果出來(lái),然后恢復(fù)async函數(shù)的執(zhí)行并返回解析值(resolved)鹏浅。

注意嗅义, await 關(guān)鍵字僅僅在 async function中有效。如果在 async function函數(shù)體外使用 await 隐砸,你只會(huì)得到一個(gè)語(yǔ)法錯(cuò)誤(對(duì)象代表嘗試解析語(yǔ)法上不合法的代碼的錯(cuò)誤之碗。)。

var resolveAfter2Seconds = function() {
  console.log("starting slow promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("slow");
      console.log("slow promise is done");
    }, 2000);
  });
};

var resolveAfter1Second = function() {
  console.log("starting fast promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("fast");
      console.log("fast promise is done");
    }, 1000);
  });
};

var sequentialStart = async function() {
  console.log('==SEQUENTIAL START==');

  // 1. Execution gets here almost instantly
  const slow = await resolveAfter2Seconds();
  console.log(slow); // 2. this runs 2 seconds after 1.

  const fast = await resolveAfter1Second();
  console.log(fast); // 3. this runs 3 seconds after 1.
}

var concurrentStart = async function() {
  console.log('==CONCURRENT START with await==');
  const slow = resolveAfter2Seconds(); // starts timer immediately
  const fast = resolveAfter1Second(); // starts timer immediately

  // 1. Execution gets here almost instantly
  console.log(await slow); // 2. this runs 2 seconds after 1.
  console.log(await fast); // 3. this runs 2 seconds after 1., immediately after 2., since fast is already resolved
}

var concurrentPromise = function() {
  console.log('==CONCURRENT START with Promise.all==');
  return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => {
    console.log(messages[0]); // slow
    console.log(messages[1]); // fast
  });
}

var parallel = async function() {
  console.log('==PARALLEL with await Promise.all==');
  
  // Start 2 "jobs" in parallel and wait for both of them to complete
  await Promise.all([
      (async()=>console.log(await resolveAfter2Seconds()))(),
      (async()=>console.log(await resolveAfter1Second()))()
  ]);
}

// This function does not handle errors. See warning below!
var parallelPromise = function() {
  console.log('==PARALLEL with Promise.then==');
  resolveAfter2Seconds().then((message)=>console.log(message));
  resolveAfter1Second().then((message)=>console.log(message));
}

sequentialStart(); // after 2 seconds, logs "slow", then after 1 more second, "fast"

// wait above to finish
setTimeout(concurrentStart, 4000); // after 2 seconds, logs "slow" and then "fast"

// wait again
setTimeout(concurrentPromise, 7000); // same as concurrentStart

// wait again
setTimeout(parallel, 10000); // truly parallel: after 1 second, logs "fast", then after 1 more second, "slow"

// wait again
setTimeout(parallelPromise, 13000); // same as parallel
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末凰萨,一起剝皮案震驚了整個(gè)濱河市继控,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌胖眷,老刑警劉巖武通,帶你破解...
    沈念sama閱讀 221,576評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異珊搀,居然都是意外死亡冶忱,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門境析,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)囚枪,“玉大人派诬,你說(shuō)我怎么就攤上這事×凑樱” “怎么了默赂?”我有些...
    開封第一講書人閱讀 168,017評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)括勺。 經(jīng)常有香客問(wèn)我缆八,道長(zhǎng),這世上最難降的妖魔是什么疾捍? 我笑而不...
    開封第一講書人閱讀 59,626評(píng)論 1 296
  • 正文 為了忘掉前任奈辰,我火速辦了婚禮,結(jié)果婚禮上乱豆,老公的妹妹穿的比我還像新娘奖恰。我一直安慰自己,他們只是感情好宛裕,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,625評(píng)論 6 397
  • 文/花漫 我一把揭開白布瑟啃。 她就那樣靜靜地躺著,像睡著了一般续滋。 火紅的嫁衣襯著肌膚如雪翰守。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,255評(píng)論 1 308
  • 那天疲酌,我揣著相機(jī)與錄音蜡峰,去河邊找鬼。 笑死朗恳,一個(gè)胖子當(dāng)著我的面吹牛湿颅,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播粥诫,決...
    沈念sama閱讀 40,825評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼油航,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了怀浆?” 一聲冷哼從身側(cè)響起谊囚,我...
    開封第一講書人閱讀 39,729評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎执赡,沒(méi)想到半個(gè)月后镰踏,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,271評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡沙合,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,363評(píng)論 3 340
  • 正文 我和宋清朗相戀三年奠伪,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,498評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡绊率,死狀恐怖谨敛,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情滤否,我是刑警寧澤脸狸,帶...
    沈念sama閱讀 36,183評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站顽聂,受9級(jí)特大地震影響肥惭,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜紊搪,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,867評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望全景。 院中可真熱鬧耀石,春花似錦、人聲如沸爸黄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,338評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)炕贵。三九已至梆奈,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間称开,已是汗流浹背亩钟。 一陣腳步聲響...
    開封第一講書人閱讀 33,458評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鳖轰,地道東北人清酥。 一個(gè)月前我還...
    沈念sama閱讀 48,906評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像蕴侣,于是被迫代替她去往敵國(guó)和親焰轻。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,507評(píng)論 2 359

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