vue前后端交互用什么（Vue前后端交互）
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>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！