溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

js中為什么要使用promise

發布時間:2020-09-21 09:15:46 來源:億速云 閱讀:805 作者:小新 欄目:web開發

這篇文章給大家分享的是有關js中為什么要使用promise的內容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。

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中為什么要使用promise就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女