溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

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

Node.js(十二)——NodeJs中的Promise

發(fā)布時間：2020-06-20 19:44:07 來源：網(wǎng)絡(luò) 閱讀：685 作者：mazongfei 欄目：web開發(fā)

爬蟲基于回調(diào)和事件的方式去實現(xiàn)，回調(diào)也是被詬病已久的問題尤其是callback這種，無論是閱讀還是調(diào)試都很費勁，甚至我們連代碼的堆棧都看不到，這是一種反人類的寫法,Promise來拜托這種痛苦的方式

傳統(tǒng)方式實現(xiàn)動畫效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Promise animation</title>
	<style>
		.ball{
			width:40px;
			height:40px;
			border-radius: 20px;/**圓角**/
		}
		.ball1{
			background: red;
		}
		.ball2{
			background: yellow;
		}
		.ball3{
			background: green;
		}
	</style>
	<script src="./node_modules/bluebird/js/browser/bluebird.js"></script>
	
	</head>
	<body onload="init();">
		<div class="ball ball1" ></div>
		<div class="ball ball2" ></div>
		<div class="ball ball3" ></div>
		<script type="text/javascript">
		
			function init(){
				
				//首先拿到這三個小球
			var ball1 = document.querySelector('.ball1')
			var ball2 = document.querySelector('.ball2')
			var ball3 = document.querySelector('.ball3')
		
		/**
		 * 動畫函數(shù)
		 * @param {Object} ball 球
		 * @param {Object} distance 位置，把球移動到哪里
		 * @param {Object} cb 回調(diào)的callback
		 */
			function animate(ball,distance,cb){
				alert(ball)
				//設(shè)定一個延時
				setTimeout(function(){
					//拿到球現(xiàn)在距離左邊距的位置
					var marginLeft = parseInt(ball.style.marginLeft,10)
					//判斷左邊距移動到和我們傳入的distance的時候
					//重疊,說明動畫執(zhí)行完畢
					if(marginLeft===distance){
						//直接調(diào)用回調(diào)函數(shù)
						cb && cb()
					}else{//小球沒有達到我們預(yù)期的位置
						//球在我們期望位置的左側(cè)
						if(marginLeft<distance){
							marginLeft++
						}else{//在右側(cè)
							marginLeft--
						}
						
						//調(diào)整球的樣式
						ball.style.marginLeft = marginLeft + 'px'
						//不斷重復(fù)去做,直到移動到我們所期望的位置
						animate(ball,distance,cb)
					}
				},13)
				//時間越短,動畫越流暢,1秒鐘60幀
			}
			
			//調(diào)用動畫_傳統(tǒng)方式來執(zhí)行動畫
			animate(ball1,100,function(){//球從左側(cè)向右側(cè)移動100像素
				animate(ball2,200,function(){
					animate(ball3,300,function(){
						//移動完畢之后繼續(xù)移動ball3
						animate(ball3,150,function(){
							animate(ball2,150,function(){
								animate(ball1,150,function(){
									//end
								})
							})
						})
					})
				})
			})
			
			}
		
			
		</script>
	</body>
</html>

運行結(jié)果如下：

Node.js(十二)——NodeJs中的Promise


Promise方式如下：

再使用Promise方法之前先導(dǎo)入npm install bluebird模塊，之后再用script標簽來引用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Promise animation</title>
	<style>
		.ball{
			width:40px;
			height:40px;
			border-radius: 20px;/**圓角**/
		}
		.ball1{
			background: red;
		}
		.ball2{
			background: yellow;
		}
		.ball3{
			background: green;
		}
	</style>
	<script src="./node_modules/bluebird/js/browser/bluebird.js"></script>
	
	</head>
	<body>
		<div class="ball ball1" ></div>
		<div class="ball ball2" ></div>
		<div class="ball ball3" ></div>
		<script type="text/javascript">
		
				
				//首先拿到這三個小球
			var ball1 = document.querySelector('.ball1')
			var ball2 = document.querySelector('.ball2')
			var ball3 = document.querySelector('.ball3')
		
		/**
		 * 動畫函數(shù)
		 * @param {Object} ball 球
		 * @param {Object} distance 位置，把球移動到哪里
		 * @param {Object} cb 回調(diào)的callback
		 */
			function animate(ball,distance,cb){
				//設(shè)定一個延時
				setTimeout(function(){
					//拿到球現(xiàn)在距離左邊距的位置
					var marginLeft = parseInt(ball.style.marginLeft,10)
					//判斷左邊距移動到和我們傳入的distance的時候
					//重疊,說明動畫執(zhí)行完畢
					if(marginLeft===distance){
						//直接調(diào)用回調(diào)函數(shù)
						cb && cb()
					}else{//小球沒有達到我們預(yù)期的位置
						//球在我們期望位置的左側(cè)
						if(marginLeft<distance){
							marginLeft++
						}else{//在右側(cè)
							marginLeft--
						}
						
						//調(diào)整球的樣式
						ball.style.marginLeft = marginLeft + 'px'
						//不斷重復(fù)去做,直到移動到我們所期望的位置
						animate(ball,distance,cb)
					}
				},13)
				//時間越短,動畫越流暢,1秒鐘60幀
			}
			
			
			//如何用promise來執(zhí)行動畫呢，先安裝一個庫npm install bluebird
			//要安裝在該頁面同層的下面
			function promiseAnimate(ball,distance){
				return new Promise(function(resolve,reject){
					function _animate(){
						//設(shè)定一個延時
						setTimeout(function(){
							//拿到球現(xiàn)在距離左邊距的位置
							var marginLeft = parseInt(ball.style.marginLeft,10)
							if(marginLeft===distance){
								//直接調(diào)用回調(diào)函數(shù)
								resolve()
							}else{//小球沒有達到我們預(yù)期的位置
								//球在我們期望位置的左側(cè)
								if(marginLeft<distance){
									marginLeft++
								}else{//在右側(cè)
									marginLeft--
								}
								
								//調(diào)整球的樣式
								ball.style.marginLeft = marginLeft + 'px'
								//不斷重復(fù)去做,直到移動到我們所期望的位置
								_animate()
							}
						},13)
						//時間越短,動畫越流暢,1秒鐘60幀
					}
					
					//啟動調(diào)用
					_animate()
				})
			}
			
			
			promiseAnimate(ball1,100)
				.then(function(){
					return promiseAnimate(ball2,200)
				})
				.then(function(){
					return promiseAnimate(ball3,300)
				})
				.then(function(){
					return promiseAnimate(ball3,150)
				})
				.then(function(){
					return promiseAnimate(ball2,150)
				})
				.then(function(){
					return promiseAnimate(ball1,150)
				})
		</script>
	</body>
</html>

運行效果同上。

在callback中,如果調(diào)換動畫的執(zhí)行順序或者增加幾個或者減少幾個，需要重新更改代碼；

如果用promise則是一個線性的控制無論是閱讀還是維護的體驗上都得到了提升，

這僅僅是在瀏覽器中的應(yīng)用，在NodeJs中回調(diào)的場景更多也更殘忍，

尤其是有遠程API同步和數(shù)據(jù)庫查詢、文件讀寫操作的時候，Promise就能解決這些痛點

并且也遠不止于此

了解Promise需要了解如下知識

1.ES6的Promise語言標準、Promise/A+規(guī)范

Promise是針對JavaScript中的異步場景中的解決方案（傳統(tǒng)：回調(diào)、事件機制、訂閱者、等）

Promise是一個對象和JavaScript中普通的對象沒有什么區(qū)別，

同時它也是一種規(guī)范，異步操作約定了統(tǒng)一的接口，表示一個異步操作的最終結(jié)果，

以同步的方式來寫代碼，執(zhí)行的操作是異步的，又保證了程序的執(zhí)行順序是同步的，

只有三種狀態(tài)：未完成、已完成、失敗

其中中間轉(zhuǎn)換過程只能發(fā)生一次并且是不可逆的；

意思是指：要么從未完成到已完成，要么從未完成到失敗。

那Promise/A+規(guī)范是什么呢？

升級版，行為標準 擴展了原來的規(guī)范，約定俗成的行為，總之是一個更為標準的

不同之處：

A+規(guī)范通過術(shù)語thenable來區(qū)分promise對象

A+定義onFulfiled/onRejected必須是作為函數(shù)來調(diào)用，而且調(diào)用過程必須是異步的

A+嚴格定義了then方法鏈式調(diào)用時onFulfilled/onRejected的調(diào)用順序

then方法定義如下：

promiseObj.then(onFulfilled,onRejected)

onFulfilled = function(value){
	return promiseObj2
}

onRejected = function(err){}

2.如何使用

鏈式調(diào)用，例如：

promiseAnimate(ball1,100)
				.then(function(){
					return promiseAnimate(ball2,200)
				})
				.then(function(){
					return promiseAnimate(ball3,300)
				})
				.then(function(){
					return promiseAnimate(ball3,150)
				})
				.then(function(){
					return promiseAnimate(ball2,150)
				})
				.then(function(){
					return promiseAnimate(ball1,150)
				})

3.在什么場景下使用

只要是異步編程的地方都可以使用，業(yè)務(wù)場景簡單不要為了使用Promise而使用Promise


Promise庫有很多，例如：

bluebird

Q

then.js

es6-promise

ypromise

async

native-promise-only

等等


向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手