好久没有更新博客了,刚好最近对http这个服务有深入的研究,所以今天抽空给大家讲讲这个东西
ionic与服务器的交互主要有两种一种是$http,另一种是$resourse。$resourse没研究,所以这个博客说的内容只有$http的相关内容。
对于传统的阿贾克斯应用来说,与服务器的交互是通过XMLHttpRequest对象来实现的。
具体实现示例如下:(代码来自w3cschool)
<script type="text/javascript"> var xmlhttp; function loadXMLDoc(url) { xmlhttp=null; if (window.XMLHttpRequest) {// code for all new browsers xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) {// code for IE5 and IE6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp!=null) { xmlhttp.onreadystatechange=state_Change; xmlhttp.open("GET",url,true); xmlhttp.send(null); } else { alert("Your browser does not support XMLHTTP."); } } function state_Change() { if (xmlhttp.readyState==4) {// 4 = "loaded" if (xmlhttp.status==200) {// 200 = OK // ...our code here... } else { alert("Problem retrieving XML data"); } } } </script>整个过程可以简要的描述成:新建一个XMLHttpRequest对象、发起请求、读取响应、核对状态码,接受服务器响应。
这个过程在ionic中,被进行了封装。使用了Promise的规范的接口。(Promise之前的课程中,我提到过这个东西,就是$q。好处在前面已经说过了。我一直强调在写服务时使用它,就是因为底层的服务里一直使用它,可以让整个代码更加的一致和便于维护)按照Promise规范,底层服务是一个异步调用的方法,将在服务器处理完业务之后返回所需要的数据。这里我们看一个简单的示例。
$http.get(url).success(function(data,status,headers,config){ //请求正确的响应,不代表请求数据正确,只是说请求过程正确。请求数据的正确判断,一般是根据服务端返回的数据里面携带的状态码判断的 }).error(function(data,status,headers,config){ //请求错误的响应,表示请求过程错误 })上面的示例,响应函数的携带参数写的比较清楚。一般常使用的,并且我们在开发中相当关注的只有data这个参数。其他的响应状态和头部那些,关注较少。
类似用法的方法还有head、post、delete、put、jsonp,其中同样常用的是get、jsonp、post这三个方法。
以上是ionic的请求的标准的用法,为了便于配置和活用,官方还提供了另外一种类似jQuery的方法,
$http(config)这里的config是一个对象包。具体展开如下:
$http({ method:string,//就是请求方式get、post等 url:string ,//向服务器请求的地址 params:object,//携带的参数 data:string or obj,//发送的数据 heaers:obj,//设置头部 cache:bool,//是否缓存 timeout:number,//设置超时时间,在这段时间内没有响应,自动响应错误error这个函数 //还有其他参数,常用的就上面这些 }).success().error()这里有几个东西需要关注的,我在下面详细的说明。
一、首先config参数里面有两个参数数据params和data。这两个其实都是发送时携带的参数,但是这两者是有区别的。
params参数指的是一个键值对的参数对象,会被转换成url后面携带的参数,比如
{key:value}会被转化成url?key=value
data参数指的是一个字符串或者一个对象,它是作为请求数据发送的。
二、然后需要关注的是cache这个参数,当它设置为true时,就会开启ionic的缓存响应机制。ionic会把从服务器获得的数据缓存起来,在你第二次想同一个地址请求时,就会把缓存数据响应给你。在你多次向服务器请求同一个地址时,实际上只向服务器请求了一次数据。
三、headers,设置头部。ionic中提供了两种设置头部的方法,一种设置全局请求头,在配置中实现。一种是设置局部请求头,在请求中实现。
如上述的代码中,在headers中配置headers:{'Authorization':' XXXXXXXXXXX'}就可以实现设置授权头,这就是局部的使用,在标准请求中,则使用类似如下的配置
$http.get(url,{ headers:{'XX':'XX'}, params:{xx:xx} }).success().error()其他标准请求方法,配置相似。
另一种是在配置中实现设置全局请求头。如
var app = angular.module('app',[]). config(function($httpProvider){ $httpProvider.default.headers.get['Authorization']="xxxx" })这里需要注意的是ionic的请求都会带有默认的头部Accept:application/json,text/plain,/ 和X-Requested-With:XMLHttpRequest
如果你在实际的应用中不需要这两个头部,你也可以在上述的配置函数中删掉,如:delete $httpProvider.default.headers.common['X-Requested-With']
在这里我还是要再一次强调的说明$q,具体的这个东西的实现和说明我在第五课中已经说的比较清楚了:http://blog.csdn.net/onil_chen/article/details/51099443
使用$q可以很好的把金字塔式回调的代码平坦化,并且提供了链式的作用域,以及一个单一的出错处理点。
在这里我们看一段伪代码,来理解我上面提到的这个观点。
var deferred = $q.defer() var firstFun = func(){ deferred.resolve(data)//在获得数据之后响应resolve deferred.reject(error)//在出错时响应reject } var secondFun = func(){ deferred.resolve(data)//在获得数据之后响应resolve deferred.reject(error)//在出错时响应reject } var thirdFun = func(){ deferred.resolve(data)//在获得数据之后响应resolve deferred.reject(error)//在出错时响应reject } deferred.promise.then(firstFun) .then(secondFun) .then(thirdFun ) .then(function(data){ //处理正确数据 },function(error){ //在上述任何一个函数中发生错误,都会想要这个错误处理函数 })
这个教程没有Demo,都是理论,但感觉还是一篇不错的教程,如果你觉得,这篇教程对你有帮助,希望能够转发给你的朋友或者群友。
还是一样的那句话,有什么问题可以通过以下方式找到我。
最近再忙,我还是会在看到问题的第一时间回答大家的。
新浪微博:小虎Oni 微信公众号:ionic__公众号最近没时间维护,但还是希望大家关注,谢谢