位置: IT常识 - 正文

Vue前后端交互(vuenode前后端交互的方式)

编辑：rootadmin

Vue前后端交互 1. 前后端交互模式

推荐整理分享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>