Promise常用API方法

最新推荐文章于 2024-04-22 17:19:14 发布

泡老师大迷弟

最新推荐文章于 2024-04-22 17:19:14 发布

阅读量835

点赞数

分类专栏： Vue学习文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/PengK_aha/article/details/128285496

版权

Vue学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1. 实例方法

2.对象方法

1. 实例方法

1.实例方法
       a. p.then() 得到异步任务的正确结果
       b. p.catch() 获取异常信息
       c. p.finally() 成功与否都会执行（尚且不是正式标准）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	Promise常用的API 
	1.实例方法
		a. p.then() 得到异步任务的正确结果
		b. p.catch() 获取异常信息
		c. p.finally() 成功与否都会执行（尚且不是正式标准）
        
        foo()
			.then(function(data){
				console.log(data)
			})
			.catch(function(data){
				console.log(data + data)
			})
			.finally(function(){
				console.log('finished')
			});
	 */
	console.dir(Promise);
	function foo(){
		return new Promise(function(resolve, reject){
			setTimeout(function(){
				//resolve(123);
				reject('error')
			}, 3000);
		});
	}
	// foo()
	// 	.then(function(data){
	// 		console.log(data)
	// 	})
	// 	.catch(function(data){
	// 		console.log(data + data)
	// 	})
	// 	.finally(function(){
	// 		console.log('finished')
	// 	});
		
	// then(function(){}, function(){}) 中第二个函数与catch() 方法等效
	foo()
		.then(function(data){
			console.log(data)
		}, function(data1){
			console.log("erro: " + data1)
		})
		
		.finally(function(){
			console.log('finished')
		});
	
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

2.对象方法

对象方法
   1.Promise.all() 并发处理多个异步任务，所有任务的都执行完成
   才能得到的结果
   Promise.all([p1, p2, p3]).then(function(result){
       console.log(result);
   });

   2.Promise.race() 并发处理多个异步任务，只要有一个任务完成就能
   得到结果
       Promise.race([p1, p2, p3]).then(function(result){
           console.log(result);
       })

   */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	2.6Promise常用的API-对象方法
	对象方法
	1.Promise.all() 并发处理多个异步任务，所有任务的都执行完成
	  才能得到的结果
	  Promise.all([p1, p2, p3]).then(function(result){
	  	console.log(result);
	  });
	  
	2.Promise.race() 并发处理多个异步任务，只要有一个任务完成就能
	  得到结果	  
		Promise.race([p1, p2, p3]).then(function(result){
			console.log(result);
		})  
	
	 */
	
	function queryData(url){
		return new Promise(function(resolve, reject){
			var xhr = new XMLHttpRequest();
			xhr.onreadystatechange = function(){
				if(xhr.readyState !=4)return;
				if(xhr.readyState == 4 && xhr.status == 200){
					resolve(xhr.responseText);
				}else {
					reject('服务器异常')
				}
			};
			xhr.open('get', url);
			xhr.send(null);
		});
	}
	
	var url1 = 'http://localhost:8090/sysUser/getList';
	var url2 = 'http://localhost:8090/sysUser/getUser/100';
	var url3 = 'http://localhost:8090/sysUser/getUser/1';
	
	var p1 = queryData(url1);
	var p2 = queryData(url2);
	var p3 = queryData(url3);
	
	Promise.all([p1, p2, p3]).then(function(result){
		console.log(result);
	});
	
	Promise.race([p1, p2, p3]).then(function(result){
		console.log(result);
	})
	
	
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>