溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關js異步問題的深入理解，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
js中的宏任務與微任務
在面試過程中，基本面試官都會問你一些promise的問題，promise是es6的新內容，主要是用來優化異步的問題。筆試中經常會讓你寫一些promise和setTimeout的執行結果，這你就必須知道宏任務和微任務的概念了！
為什么要使用promise
如果你經歷過以前的jquery開發項目，你會遇到以下問題：回調地獄
$.ajax({
...
success: function() {
...
$.ajax({
...
success: function() {
}
})
...
}
})原因分析：
ajax請求嵌套，原因是我第二個請求依賴的參數在第一個請求的結果中，所以就得這么一直嵌套下去，ajax是異步的，不能再外面拿到里面的結果。這種代碼導致的問題就是調試困難，耦合性非常高，后期改動一個地方就頭疼！維護非常困難，代碼可讀性差。
于是乎就引入了promise對ajax進行了優化，axios就是基于promise的一個請求封裝庫，他們底層都是基于js原生的XMLHTTPREQUEST.
promise().then().catch()鏈式調用，多個請求可以promise().then().then()。
何為宏任務，何為微任務?
思考這個問題時你必須知道javascript是一種單線程的腳本語言,也就是它的代碼正常只能從上往下依次執行，一次只能做一件事，異步是通過回調函數來實現的。為何不把js設計成多線程的語言呢？語言的用途決定了它的特性，js最初是用來做表單驗證以及正則判斷的，和操作DOM元素的。如果js有多個線程，一個執行DOM元素修改，另一個執行刪除，那瀏覽器直接懵逼了，我到底該干啥？？？所以語言的用途決定了他的特性，但是瀏覽器是多線程的，除了主線程還有其他線程。
當js主程序執行時，先運行主程序上的同步代碼，遇到setTimeout或setInterval就把它放入宏隊列中，遇到promise的回調就把它放到微隊列中，程序執行先執行主程序代碼，再執行nextTick代碼，然后微任務，最后宏任務，任務隊列中的依次排隊執行，async和await是配套使用的，await后面接一個promise對象，來看看下面這段代碼：
setTimeout(function(){console.log(1)},0); // 進入宏任務隊列，最后執行宏任務
new Promise(function(resolve,reject){
console.log(2); //這句代碼在promise構造器，同步執行
resolve(); // 執行了resolve再把任務放入微隊列
}).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
// 下面這個進階代碼
setTimeout(function(){console.log(1)},0); // 進入宏任務排序為1
new Promise(function(resolve,reject){
console.log(2);
// promise中執行完resolve()才會執行then(),而這里的resolve在宏任務里，執行完主程序代碼后，還得先執行先進入宏隊列中的程序
setTimeout(function(){resolve()},0) // 進入宏任務排序為2
}).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中的執行順序
代碼如下（示例）：
async function async1() {
console.log(1);
await async2();
console.log(2); //這里要等await執行成功才會執行，進入微任務，排序1
}
async function async2() {
console.log(3);
}
console.log(4); //主程序代碼
setTimeout(function() {
console.log(5);
}, 0) //進入宏任務，最后執行
async1();
new Promise(function(resolve) {
console.log(6); // 這句同步執行
resolve();
}).then(function() {
console.log(7); //進入微任務，排序2
});
console.log(8); // 主程序代碼
// 輸出的是 4,1,3,6,8,2,7,5總結
js是單線程語言，它的用途決定了他的特性，異步操作通過事件循環機制，先執行同步代碼，然后微任務，最后宏任務，兩個任務隊列里的任務排隊依次執行。await后面的代碼必須等待promise返回結果再執行下面代碼，await和async是generator函數的語法糖。
關于js異步問題的深入理解就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
