素材vue全家桶前后端交互.pptx

Vue全家桶-前后端交互

Contents目录前后端交互模式Promise用法接口调用-fetch用法接口调用-axios用法接口调用-async/await用法基于接口的案例

1.前后端交互模式互联网这里可以返回一个完整的HTML页面；也可以只返回特定格式的数据，比如json1.1接口调用方式原生ajax基于jQuery的ajaxfetchaxios

1.前后端交互模式1.2URL地址格式1.传统形式的URL格式：schema://host:port/path?query#fragmentschema：协议。例如http、https、ftp等host：域名或者IP地址port：端口,http默认端口80，可以省略path：路径,例如/abc/a/b/cquery：查询参数，例如uname=lisiage=12fragment：锚点（哈希Hash），用于定位页面的某个位置符合规则的URL

1.前后端交互模式1.2URL地址格式2.Restful形式的URLHTTP请求方式GET查询POST添加PUT修改DELETE删除符合规则的URL地址GETPOSTPUTDELETE

Contents目录前后端交互模式Promise用法接口调用-fetch用法接口调用-axios用法接口调用-async/await用法基于接口的案例

2.Promise用法2.1异步调用$.ajax({success:function(data){if(data.status==200){$.ajax({success:function(data){if(data.status==200){$.ajax({success:function(data){if(data.status==200){}}});}}});}}});异步效果分析定时任务Ajax事件函数多次异步调用的依赖分析多次异步调用的结果顺序不确定异步调用结果如果存在依赖需要嵌套

2.Promise用法2.2Promise概述Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。使用Promise主要有以下好处：可以避免多层异步调用嵌套问题(回调地狱)Promise对象提供了简洁的API，使得控制异步操作更加容易

2.Promise用法2.3Promise基本用法实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果varp=newPromise(function(resolve,reject){//成功时调用resolve()//失败时调用reject()});p.then(funciton(ret){//从resolve得到正常结果},function(ret){//从reject得到错误信息});

2.Promise用法2.4基于Promise处理Ajax请求1.处理原生AjaxfunctionqueryData(){returnnewPromise(function(resolve,reject){varxhr=newXMLHttpRequest();xhr.onreadystatechange=function(){if(xhr.readyState!=4)return;if(xhr.status==200){resolve(xhr.responseText)}else{reject(出错了);}}xhr.open(get,/data);xhr.send(null);})}

2.Promise用法2.4基于Promise处理Ajax请求2.发送多次ajax请求queryData().then(function(data){