js中的宏任務(wù)與微任務(wù)

在面試過(guò)程中，基本面試官都會(huì)問(wèn)你一些promise的問(wèn)題，promise是es6的新內(nèi)容，主要是用來(lái)優(yōu)化異步的問(wèn)題。筆試中經(jīng)常會(huì)讓你寫(xiě)一些promise和setTimeout的執(zhí)行結(jié)果，這你就必須知道宏任務(wù)和微任務(wù)的概念了！

為什么要使用promise

如果你經(jīng)歷過(guò)以前的jquery開(kāi)發(fā)項(xiàng)目，你會(huì)遇到以下問(wèn)題：回調(diào)地獄

$.ajax({
	...
	success: function() {
		...
		$.ajax({
			...
			success: function() {
				
			}
		})
		...
	}
})

原因分析：

ajax請(qǐng)求嵌套，原因是我第二個(gè)請(qǐng)求依賴的參數(shù)在第一個(gè)請(qǐng)求的結(jié)果中，所以就得這么一直嵌套下去，ajax是異步的，不能再外面拿到里面的結(jié)果。這種代碼導(dǎo)致的問(wèn)題就是調(diào)試?yán)щy，耦合性非常高，后期改動(dòng)一個(gè)地方就頭疼！維護(hù)非常困難，代碼可讀性差。

于是乎就引入了promise對(duì)ajax進(jìn)行了優(yōu)化，axios就是基于promise的一個(gè)請(qǐng)求封裝庫(kù)，他們底層都是基于js原生的XMLHTTPREQUEST.

promise().then().catch()鏈?zhǔn)秸{(diào)用，多個(gè)請(qǐng)求可以promise().then().then()。

何為宏任務(wù)，何為微任務(wù)?

思考這個(gè)問(wèn)題時(shí)你必須知道javascript是一種單線程的腳本語(yǔ)言,也就是它的代碼正常只能從上往下依次執(zhí)行，一次只能做一件事，異步是通過(guò)回調(diào)函數(shù)來(lái)實(shí)現(xiàn)的。為何不把js設(shè)計(jì)成多線程的語(yǔ)言呢？語(yǔ)言的用途決定了它的特性，js最初是用來(lái)做表單驗(yàn)證以及正則判斷的，和操作DOM元素的。如果js有多個(gè)線程，一個(gè)執(zhí)行DOM元素修改，另一個(gè)執(zhí)行刪除，那瀏覽器直接懵逼了，我到底該干啥？？？所以語(yǔ)言的用途決定了他的特性，但是瀏覽器是多線程的，除了主線程還有其他線程。

當(dāng)js主程序執(zhí)行時(shí)，先運(yùn)行主程序上的同步代碼，遇到setTimeout或setInterval就把它放入宏隊(duì)列中，遇到promise的回調(diào)就把它放到微隊(duì)列中，程序執(zhí)行先執(zhí)行主程序代碼，再執(zhí)行nextTick代碼，然后微任務(wù)，最后宏任務(wù)，任務(wù)隊(duì)列中的依次排隊(duì)執(zhí)行，async和await是配套使用的，await后面接一個(gè)promise對(duì)象，來(lái)看看下面這段代碼：

 setTimeout(function(){console.log(1)},0); // 進(jìn)入宏任務(wù)隊(duì)列，最后執(zhí)行宏任務(wù)
 new Promise(function(resolve,reject){
   console.log(2); //這句代碼在promise構(gòu)造器，同步執(zhí)行
   resolve(); // 執(zhí)行了resolve再把任務(wù)放入微隊(duì)列
 }).then(function(){console.log(3)
 }).then(function(){console.log(4)});
 process.nextTick(function(){console.log(5)});
 console.log(6); // 主程序代碼
 // 輸出2,6,5,3,4,1
 
// 下面這個(gè)進(jìn)階代碼
setTimeout(function(){console.log(1)},0); // 進(jìn)入宏任務(wù)排序?yàn)?
new Promise(function(resolve,reject){
   console.log(2);
   // promise中執(zhí)行完resolve()才會(huì)執(zhí)行then(),而這里的resolve在宏任務(wù)里，執(zhí)行完主程序代碼后，還得先執(zhí)行先進(jìn)入宏隊(duì)列中的程序
   setTimeout(function(){resolve()},0) // 進(jìn)入宏任務(wù)排序?yàn)?
 }).then(function(){console.log(3)
 }).then(function(){console.log(4)});
 process.nextTick(function(){console.log(5)});
 console.log(6);
 // 輸出的是 2 6 5 1 3 4

再看async and await中的執(zhí)行順序

代碼如下（示例）：

async function async1() {
  console.log(1); 
  await async2();
  console.log(2); //這里要等await執(zhí)行成功才會(huì)執(zhí)行，進(jìn)入微任務(wù)，排序1
}
async function async2() {
  console.log(3);
}
console.log(4); //主程序代碼
setTimeout(function() {
  console.log(5);
}, 0) //進(jìn)入宏任務(wù)，最后執(zhí)行
async1();
new Promise(function(resolve) {
  console.log(6); // 這句同步執(zhí)行
  resolve(); 
}).then(function() {
  console.log(7); //進(jìn)入微任務(wù)，排序2
});
console.log(8); // 主程序代碼
// 輸出的是 4,1,3,6,8,2,7,5

總結(jié)

js是單線程語(yǔ)言，它的用途決定了他的特性，異步操作通過(guò)事件循環(huán)機(jī)制，先執(zhí)行同步代碼，然后微任務(wù)，最后宏任務(wù)，兩個(gè)任務(wù)隊(duì)列里的任務(wù)排隊(duì)依次執(zhí)行。await后面的代碼必須等待promise返回結(jié)果再執(zhí)行下面代碼，await和async是generator函數(shù)的語(yǔ)法糖。

到此這篇關(guān)于js面試題之異步問(wèn)題的文章就介紹到這了,更多相關(guān)js面試題之異步內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論