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>

      


      

# vue.js # 前端 # javascript
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign