位置: IT常识 - 正文
Vue前后端交互(vuenode前后端交互的方式)
编辑：rootadmin推荐整理分享Vue前后端交互(vuenode前后端交互的方式)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue前后端对接,vue前端和后端交互,vue前端和后端交互,vue前后端交互的方式,vue前后端交互实现原理,vue前后端交互实现原理,vue前后端交互用的什么,vue前后端交互用什么技术,内容如对您有帮助，希望把文章链接给更多的朋友！
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实例对象返回的该实例对象会调用下一个then2.返回普通值返回的普通值会直接传递给下一个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>上一篇：CNN中的底层、高层特征、上下文信息、多尺度(cnn三层)
下一篇：【Hadoop/Java】基于HDFS的Java Web网络云盘(hadoop java)