Vue前后端交互

最新推荐文章于 2025-10-09 19:27:36 发布

原创最新推荐文章于 2025-10-09 19:27:36 发布 · 3.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue学习专栏收录该内容

16 篇文章

订阅专栏

1. 前后端交互模式

1.1   接口调用方式
       1.原生ajax
       2.基于jQuery的ajax
       3.fetch
       4.axios

   1.2 URL地址格式
       1.传统形式的url
           格式 schema://host:port/path?query#fragment
           schema: 协议。例如http，https，ftp等
           host: 域名或者ip地址
           port: 端口，http默认端口80，可以省略
           path: 路径，例如/abc/a/b/c
           query: 查询参数，例如uname=lisi&age=12
           fragment: 锚点（哈希Hash），用于定位页面的某个位置
       2.RestFul形式的URL
           HTTP请求方式
           1.GET 查询
           2.POST 添加
           3.PUT 修改

           4.DELETE 删除

2. Promise用法

2.1 异步调用
           异步效果分析
               1.定时任务
               2.Ajax
               3.事件函数
           多次异步调用的依赖分析
               1.多次异步调用的结果顺序不确定
               2.异步调用结果如果存在依赖需要嵌套

       2.2 Promise概述
           Promise是异步编程的一种解决方案，从语法上讲，Promise是一个
           对象，从它可以获取异步操作的消息。

           使用Promise主要有以下好处
           1.可以避免多层异步调用嵌套问题（回调地狱）
           2.Promise对象提供了简洁的API，使得控制异步操作更加容易

       2.3   Promise基本用法
           a.实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务；
           b.resolve 和 reject 两个参数用于处理成功和失败两种情况，并通过
           p.then获取处理结果；
           var p = new Promise(function(resolve, reject){
               //成功时调用 resolve()
               //失败时调用 reject()
           });
           p.then(function(result){
               //从resolve得到的正常结果
           },function(result){
               //从reject得到的错误信息
           });

2.4基于Promise处理Ajax请求

发送多次ajax请求

  queryData(url1).
       then(function(data){
           console.log(data);
           return queryData(url2);
       })
       .then(function(data2){
           console.log(data2);
           return queryData(url3);
       })
       .then(function(data3){
           console.log(data3);
       })

<!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.4基于Promise处理Ajax请求
		
		发送多次ajax请求
	
	
	 */
	function queryData(url){
		var p = 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);					
		});
		return p;
	}
	// queryData('http://localhost:8090/sysUser/getList').then(function(data){
	// 	console.log(data);
	// },function(info){
	// 	console.log(info);
	// });
	
	//**************************
	//发送多个ajax请求，并且保证顺序
	var url1 = 'http://localhost:8090/sysUser/getList';
	var url2 = 'http://localhost:8090/sysUser/getUser/100';
	var url3 = 'http://localhost:8090/sysUser/getUser/1';
	queryData(url1).
		then(function(data){
			console.log(data);
			return queryData(url2);
		})
		.then(function(data2){
			console.log(data2);
			return queryData(url3);
		})
		.then(function(data3){
			console.log(data3);
		})
		
		
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

2.5then参数中的函数返回值

1.返回Promise实例对象
           返回的该实例对象会调用下一个then

       2.返回普通值
           返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值

<!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.5then参数中的函数返回值
		1.返回Promise实例对象
			返回的该实例对象会调用下一个then
		
		2.返回普通值
			返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值
	
	 */
		
		function queryData(url){
			var p = 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);					
			});
			return p;	
		}
		
		
		
		var url1 = 'http://localhost:8090/sysUser/getList';
		var url2 = 'http://localhost:8090/sysUser/getUser/100';
		queryData(url1)
			.then(function(data){
				console.log(data);
				return queryData(url2);
			})
			.then(function(data2){
				console.log(data2);
				return new Promise(function(resolve, reject){
					setTimeout(function(){
						resolve('延迟3s')
					}, 3000)
				});
			})
			.then(function(data3){
				console.log(data3);
				return 'hello';
			})
			.then(function(data4){
				console.log(data4);
			})
	
	
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>