位置: 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 修改

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

            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>             
本文链接地址:https://www.jiuchutong.com/zhishi/299527.html 转载请保留说明!

上一篇:CNN中的底层、高层特征、上下文信息、多尺度(cnn三层)

下一篇:【Hadoop/Java】基于HDFS的Java Web网络云盘(hadoop java)

  • 工资完整的账务处理
  • 给客户开增值税专用发票
  • 现金流量表存货增加是负的
  • 增值税发票什么时候认证
  • 所得税流程
  • 小规模销售免税农产品的分录
  • 自己打印的机票怎么退票
  • 增值税发票丢了怎么办?
  • 出售使用过的固定资产
  • 按价格从价缴纳增值税
  • 辅导期一般纳税人什么意思
  • 事业单位取得了应税收入如何纳税?
  • 计提以前年度税金
  • 评估入账的开发权是否可以税前扣除?
  • 增值税计提金额
  • 企业所得税 税法
  • 设备安装税率是6%还是9%
  • 7月1日起,中药生产企业增值税税率为多少?
  • 异常增值税扣税凭证
  • 已经开了的发票可以打销货清单吗
  • 跨年度残保金退税怎么算
  • 享受小型微利企业标准
  • 哪些项目可以在城镇开发边界外
  • 费用销售收入占比怎么算
  • quickdcf.exe - quickdcf是什么进程 作用是什么
  • 网页提示摄像头未授权
  • php statement
  • 个人税收是怎么计算的举例
  • 克拉克湖国家公园
  • 展开双翅的绯红之花
  • 用php做计算
  • php7多线程支持如何
  • php用户登录界面
  • 选项式api和组合式api哪个好
  • 利润分配和所有权的关系
  • SQL Server 在Management Studio中使用Web浏览器
  • mysql 提示
  • 培训费发票开具的要求有?
  • 公司举办年会的心得体会
  • 数据库维护工作主要包括哪些内容
  • 短期借款的其它账户
  • Mysql获取当前年份
  • 权益法下公允价值变动计入其他综合收益
  • 个体户与公司的差别
  • 关于出售使用过的产品
  • 车间报销维修费会计科目
  • 小商户怎么打发票
  • 为在建工程发生的差旅费
  • 营业执照已办理,公司章程在哪里找
  • 旅行社差额征收税率多少
  • 公司股东可以买公司股票吗
  • 原材料暂估的业务包括
  • 公司员工的电话费可以做费用吗
  • 差旅费一般包括往返及当地的交通费
  • 如何用命令关机
  • linux详解
  • win7怎么设置禁止安装软件
  • 进程registry
  • WNxp下让所有用户桌面显示系统默认图标的方法
  • 怎么用macbook
  • linker command failed with exit code 1 (use -v to see invocation)
  • 学习的引子
  • 微信小程序实现轮播图
  • 写一个bat文件
  • Unity3D游戏开发标准教程吴亚峰于复兴人民邮电出版社
  • python中将
  • 基于stm32的100个毕业设计
  • jquery 列表实现
  • js格式化输出数字
  • 远程调用call
  • jquery实现动画
  • 机票的抵扣率是多少
  • 东莞税务申报日期
  • ppr管材税收编码
  • 企业收取承包费如何缴纳增值税
  • 信用体系建设
  • 政府给予补贴
  • 税务稽查团队
  • 全国青少年学法网(官网)
  • 公司残疾员工是什么待遇
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设