ES6 Promise对象

最新推荐文章于 2024-05-20 09:15:51 发布

乐观勇敢坚强的老彭

最新推荐文章于 2024-05-20 09:15:51 发布

阅读量127

点赞数

分类专栏：程序

本文链接：https://blog.csdn.net/pxklove1214/article/details/104275088

版权

程序专栏收录该内容

22 篇文章 0 订阅

订阅专栏

什么是Promise?

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

通过几个例子说明Promise对象的用法：
实例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 新建一个承诺对象
			// 写入一个匿名函数,有两个形参resolve,reject
			// 成功了回调reslove,失败了回调reject
			let p1 = new Promise(function(reslove,reject){
				// 承诺的主体
				setTimeout(function(){
					let r = Math.random();
					// 查看随机结果
					console.log(`r: ${r}`);
					if(r>0.5){
						reslove();
					}else{
						reject();
					}
				},1000)
			})
			
			// 实例对象.then() 实现结果的回调
			p1.then(function(){console.log("成功！")},function(){console.log("失败！")})
		</script>
	</body>
</html>

实例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 连续三次yes -->
		<script src="jQuery1.12/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let p1 = new Promise(function(reslove,reject){
				
				// 承诺主体
				$.ajax({
					url:"https://yesno.wtf/api",
					type:"get",
					success:function(result){
						if(result.answer=="yes"){
							reslove();
						}else{
							reject();
						}
					}
				})
			})
			
			// 承诺结果的回调
			p1.then(function(){console.log("第一次成功！");
				let p2 = new Promise(function(reslove,reject){
					
					$.ajax({
						url:"https://yesno.wtf/api",
						type:"get",
						success:function(data){
							if(data.answer=="yes"){
								reslove();
							}else{
								reject();
							}
						}
					})
				})
				
				p2.then(function(){console.log("第二次成功！");
					
					let p3 = new Promise(function(reslove,reject){
						
						$.ajax({
							url:"https://yesno.wtf/api",
							type:"get",
							success:function(data){
								if(data.answer=="yes"){
									reslove();
								}else{
									reject();
								}
							}
						})
					})
					
					p3.then(function(){console.log("第三次成功！");},
					function(){console.log("第三次失败 ");})
				
				},function(){console.log("第二次失败");})
			
			},function(){console.log("第一次失败");}
				
			)
		</script>
	</body>
</html>

实例3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		当前天气状况：<span></span>
		<script src="jQuery1.12/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function getAddr(){
				return new Promise( (reslove,reject)=>{
					$.ajax({
						url:"https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5&output=jsonp",
						type:"get",
						dataType:"jsonp",
						success:function(data){
							reslove(data.result.ad_info);
						}
					})
				} )
			}
			
			function getWeather(data){
				return new Promise( (reslove,reject)=>{
					$.ajax({
						url:`http://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=${data.province}&city=${data.city}`,
						type:"get",
						dataType:"jsonp",
						success:function(weather){
							reslove(weather);
						}
					})
				} )
			}
			// getAddr().then((r)=>{console.log(r);} )
// 			let addr = {
// 				"nation": "中国",
// 				"province": "河南省",
// 				"city": "开封市",
// 				"district": "金水区",
// 				"adcode": 410105
// 			}		
// 			getWeather(addr).then((r)=>{console.log(r);})
			// 实现了自动获取当天位置的天气
			getAddr().then(getWeather).then((weather)=>{
				$("span").text(weather.data.air["aqi_name"]);
			})
		</script>
	</body>
</html>

乐观勇敢坚强的老彭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 Promise对象

什么是Promise?Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise...
复制链接

扫一扫