位置: 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)

  • 拿工资要开发票,发票去哪儿开?
  • 营利性幼儿园怎样登记
  • 银行利息支出税前扣除标准
  • 免税 普票
  • 纳税收入包含哪些
  • 现代服务业包括哪些行业税率
  • 社保次月缴纳上月算不算中断
  • 酒店怎么合理规划管理
  • 长期待摊费用可以转入费用或者成本吗
  • 航空货运单可以由谁来填写
  • 中标服务费可以抵扣进项税吗
  • 外资企业所得税和内资区别
  • 百分百控股股东叫什么
  • 材料采购成本差异属于什么科目
  • 年薪制有什么好处
  • 企业所得税退税的会计分录怎么做
  • 对外销售白酒如何纳税
  • 负利润需要交所得税吗
  • 租房发票的税由谁承担
  • 投资款印花税的税率是多少啊
  • 简并增值税税率政策解读
  • 质押股票是否缴印花税
  • 印花税扣款
  • 一般纳税人开税票
  • 广告费和业务宣传费税前扣除基数
  • 商誉减值可以避税吗
  • 技术合同包括哪些类型
  • 设置系统自动更新一般通过什么窗口
  • 零售企业进销存怎么结转成本
  • win7纯净版本
  • 土地增值税的收费标准
  • PHP:mcrypt_list_algorithms()的用法_Mcrypt函数
  • php socket 非阻塞
  • yii框架教程
  • 股东无偿投入的土地需要摊销吗
  • 折旧和摊销的区别通俗
  • 小型微利企业所得税优惠政策2023
  • php删除数据
  • get_module_base
  • 采购的原材料无保质期
  • 营业外支出的会计科目
  • 什么是企业管理的首要职能
  • 机械设备大修标准
  • mysql查询性能优化
  • 装卸搬运服务属于劳务吗
  • 零申报年报
  • 当master down掉后,pt-heartbeat不断重试会导致内存缓慢增长的原因及解决办法
  • 小规模纳税人减按1%征收率征收增值税
  • mysql密码忘了咋办
  • mysql字符串字段数据类型
  • 预付房租摊销从哪月算起
  • 公司被仲裁后怎么补救
  • 分支机构注销后往来账如何处理?
  • 商业企业购入商品
  • 增值税专用设备是什么
  • 退回工伤保险的现金流
  • 直接人工成本包括管理人员开的工资吗
  • 增值税其他收益包括哪些
  • 去年的凭证今年未入账
  • win10 mobile 预览10240
  • 播放winner
  • 图形工具的作用
  • centos查看wwn
  • fedora linux安装教程
  • win1021年更新
  • windows10周年更新
  • win10安装完后有多大
  • w8虚拟内存怎么设置
  • Extjs中RowExpander控件的默认展开问题示例探讨
  • node-js
  • nodejs发送post请求socket hand up
  • linux shutdown命令详解
  • unity3d导出工程文件
  • javascript零基础入门书籍
  • jquery页面
  • 电子税务局查询一般纳税人资格
  • 安徽税务网上申报领取发票
  • 铅球七米
  • 城建税教育费附加怎么做分录
  • 内蒙古国税网上办税厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设