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

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

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供丹東網(wǎng)站建設(shè)、丹東做網(wǎng)站、丹東網(wǎng)站設(shè)計、丹東網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、丹東企業(yè)網(wǎng)站模板建站服務(wù)，十載丹東做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

傳統(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

then.js

es6-promise

ypromise

async

native-promise-only

等等

文章名稱：Node.js(十二)——NodeJs中的Promise
鏈接URL：http://www.jbt999.com/article10/pdggdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、域名注冊、小程序開發(fā)、網(wǎng)站維護、網(wǎng)站策劃、用戶體驗

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容