Promise使用

weixin_47450807發表於2020-10-09
Promise

Promise的使用
Es6中的Promise使得非同步變得比同步變成簡單，大大減少了程式碼量。

  1. 新建一個Promise物件
var p=new Promise()
  1. 新增非同步操作
    在這裡使用了jQuery，應該在檔案中引入jQuery檔案
var p=new Promise(function(resolve,reject)
{
	$.ajax({
		url:'arr.txt', 
		dataType:'json',
		success(data){  
			resolve(data);}, 
		error(err){    
			reject(err);}     
		})   
	})

這裡應該在Promise中傳入一個函式，函式有兩個引數，一個是resolve，就是在讀取檔案正確時，將讀取到的資料傳給這一個函式，另一個是reject，就是當讀取檔案錯誤的時候，將錯誤物件傳給這一個函式。
3. then()

p.then(function(data){      
	console.log(data);},
	function(){      
	console.log('錯誤');    
	})

這裡是讀取完成後(可能讀取成功，也可能讀取失敗)，執行的then操作。then的引數中有兩個函式，就是第一個引數就是上述的resolve函式，第二個就是reject函式。
4.整體程式碼：

<!DOCTYPE html>
<html lang="cn">
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  
<script src="./jquery.min.js"></script>
</head>
<body>  
	<script>    
	var p=new Promise(function(resolve,reject){      
		$.ajax({        
		url:'arr.txt',        
		dataType:'json', 
		success(data){   
	      		 resolve(data);},
		error(err){          
			reject(err) }
		})    })    
		p.then(function(data){      
		console.log(data);    
		},function(){      
		console.log('錯誤');    
		})  
</script>
</body>
</html>

Promise.all()

  1. 基本使用
    如果讀取多個檔案時，可以使用Promise.all()
    Promise.all()裡面傳入一個引數------一個陣列，就是陣列裡面存放著需要讀取的物件
    2.程式碼為：
<!DOCTYPE html>
<html lang="cn"><head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  
<script src="./jquery.min.js"></script>
</head>
<body>  
<script>    
	var p1=new Promise(function(resolve,reject){      
	$.ajax({        
	url:'arr.txt',        
	dataType:'json',        
	success(data){          
	resolve(data);        
	},        
	error(err){         
	reject(err)        
	}      
	})    
	});    
	var p2=new Promise(function(resolve,reject){      
	$.ajax({        
	url:'arr_2.txt',        
	dataType:'json',        
	success(data){          
	resolve(data);        
	},        
	error(err){          
	reject(err)        
	}      
	})    
	})   
	Promise.all([p1,p2]).then(data=>{    
	let [arr_1,arr_2]=data;    
	console.log(arr_1);    
	console.log(arr_2);   
	},error=>{    
	console.log('讀取錯誤');   
	})  
	</script>
</body>
</html>

在jQuery中的promise

  1. 在jQuery中$.ajax({url:'arr.txt',dataType:'json'})就是一個Promise物件
  2. 所以在Promise.all()中的陣列中就可以直接將其傳入，使程式碼更簡潔
  3. 程式碼為：
<!DOCTYPE html>
<html lang="cn">
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title> 
 <script src="./jquery.min.js"></script>
 </head>
 <body>  
 <script>  
   Promise.all([     
    $.ajax({url:'arr.txt',dataType:'json'}),      $.ajax({url:'arr_2.txt',dataType:'json'}),    ]).then(data=>{      let [arr_1,arr_2]=data;      
  console.log(arr_1);      
  console.log(arr_2);    
  },error=>{      
   console.log('錯誤');    })  
   </script>
   </body>
</html>

注意該例子需要在開啟伺服器才可以讀取其中的問價，因為ajax如果不能直接從本地讀取檔案資料

相關文章