Promise使用

最新推荐文章于 2024-04-21 18:05:19 发布

卖菜的小白

最新推荐文章于 2024-04-21 18:05:19 发布

阅读量323

点赞数

文章标签： js ajax jquery

本文链接：https://blog.csdn.net/weixin_47450807/article/details/108985942

版权

Promise的使用
Es6中的Promise使得异步变得比同步变成简单，大大减少了代码量。

新建一个Promise对象

var p=new Promise()

添加异步操作
在这里使用了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()

基本使用
如果读取多个文件时，可以使用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

在jQuery中$.ajax({url:'arr.txt',dataType:'json'})就是一个Promise对象
所以在Promise.all()中的数组中就可以直接将其传入，使代码更简洁
代码为：

<!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如果不能直接从本地读取文件数据

卖菜的小白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Promise使用

Promise的使用Es6中的Promise使得异步变得比同步变成简单，大大减少了代码量。标题1. Promise的基本使用新建一个Promise对象var p=new Promise()添加异步操作在这里使用了jQuery，应该在文件中引入jQuery文件var p=new Promise(function(resolve,reject){ $.ajax({ url:'arr.txt', dataType:'json', success(data){ re
复制链接

扫一扫