ionic入门教程第十七课-深入讲解与服务器的交互$http、$q、设置头部、不包括$resourse

ionic入门教程第十七课-深入讲解与服务器的交互$http、$q、设置头部、不包括$resourse

好久没有更新博客了，刚好最近对http这个服务有深入的研究，所以今天抽空给大家讲讲这个东西

ionic与服务器的交互主要有两种一种是$http,另一种是$resourse。$resourse没研究，所以这个博客说的内容只有$http的相关内容。

对于传统的阿贾克斯应用来说，与服务器的交互是通过XMLHttpRequest对象来实现的。

具体实现示例如下：（代码来自w3cschool）

[javascript]  view plain  copy

1. <script type="text/javascript">  
2. var xmlhttp;  
3. function loadXMLDoc(url)  
4. {  
5. xmlhttp=null;  
6. if (window.XMLHttpRequest)  
7.   {// code for all new browsers  
8.   xmlhttp=new XMLHttpRequest();  
9.   }  
10. else if (window.ActiveXObject)  
11.   {// code for IE5 and IE6  
12.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
13.   }  
14. if (xmlhttp!=null)  
15.   {  
16.   xmlhttp.onreadystatechange=state_Change;  
17.   xmlhttp.open("GET",url,true);  
18.   xmlhttp.send(null);  
19.   }  
20. else  
21.   {  
22.   alert("Your browser does not support XMLHTTP.");  
23.   }  
24. }  
25.   
26. function state_Change()  
27. {  
28. if (xmlhttp.readyState==4)  
29.   {// 4 = "loaded"  
30.   if (xmlhttp.status==200)  
31.     {// 200 = OK  
32.     // ...our code here...  
33.     }  
34.   else  
35.     {  
36.     alert("Problem retrieving XML data");  
37.     }  
38.   }  
39. }  
40. </script>  

整个过程可以简要的描述成：新建一个XMLHttpRequest对象、发起请求、读取响应、核对状态码，接受服务器响应。

这个过程在ionic中，被进行了封装。使用了Promise的规范的接口。（Promise之前的课程中，我提到过这个东西，就是$q。好处在前面已经说过了。我一直强调在写服务时使用它，就是因为底层的服务里一直使用它，可以让整个代码更加的一致和便于维护）按照Promise规范，底层服务是一个异步调用的方法，将在服务器处理完业务之后返回所需要的数据。这里我们看一个简单的示例。

[javascript]  view plain  copy

1. $http.get(url).success(function(data,status,headers,config){  
2. //请求正确的响应，不代表请求数据正确，只是说请求过程正确。请求数据的正确判断，一般是根据服务端返回的数据里面携带的状态码判断的  
3. }).error(function(data,status,headers,config){  
4. //请求错误的响应，表示请求过程错误  
5. })  

上面的示例，响应函数的携带参数写的比较清楚。一般常使用的，并且我们在开发中相当关注的只有data这个参数。其他的响应状态和头部那些，关注较少。

类似用法的方法还有head、post、delete、put、jsonp，其中同样常用的是get、jsonp、post这三个方法。

以上是ionic的请求的标准的用法，为了便于配置和活用，官方还提供了另外一种类似jQuery的方法，

$http（config）这里的config是一个对象包。具体展开如下：

[javascript]  view plain  copy

1. $http（{  
2. method:string,//就是请求方式get、post等  
3. url:string ,//向服务器请求的地址  
4. params:object,//携带的参数  
5. data:string or obj,//发送的数据  
6. heaers:obj,//设置头部  
7. cache:bool,//是否缓存  
8. timeout:number,//设置超时时间，在这段时间内没有响应，自动响应错误error这个函数  
9. //还有其他参数，常用的就上面这些  
10. }）.success().error()  

这里有几个东西需要关注的，我在下面详细的说明。

一、首先config参数里面有两个参数数据params和data。这两个其实都是发送时携带的参数，但是这两者是有区别的。

params参数指的是一个键值对的参数对象，会被转换成url后面携带的参数，比如

{key:value}会被转化成url?key=value

data参数指的是一个字符串或者一个对象，它是作为请求数据发送的。

二、然后需要关注的是cache这个参数，当它设置为true时，就会开启ionic的缓存响应机制。ionic会把从服务器获得的数据缓存起来，在你第二次想同一个地址请求时，就会把缓存数据响应给你。在你多次向服务器请求同一个地址时，实际上只向服务器请求了一次数据。

三、headers，设置头部。ionic中提供了两种设置头部的方法，一种设置全局请求头，在配置中实现。一种是设置局部请求头，在请求中实现。

如上述的代码中，在headers中配置headers:{'Authorization':' XXXXXXXXXXX'}就可以实现设置授权头，这就是局部的使用，在标准请求中，则使用类似如下的配置

[javascript]  view plain  copy

1. $http.get(url,{  
2. headers:{'XX':'XX'},  
3. params:{xx:xx}  
4. }).success().error()  

其他标准请求方法，配置相似。

另一种是在配置中实现设置全局请求头。如

[javascript]  view plain  copy

1. var app = angular.module('app',[]).  
2. config(function($httpProvider){  
3. $httpProvider.default.headers.get['Authorization']="xxxx"  
4. })  

这里需要注意的是ionic的请求都会带有默认的头部Accept:application/json,text/plain,/ 和X-Requested-With:XMLHttpRequest

如果你在实际的应用中不需要这两个头部，你也可以在上述的配置函数中删掉，如：delete $httpProvider.default.headers.common['X-Requested-With']

在这里我还是要再一次强调的说明$q,具体的这个东西的实现和说明我在第五课中已经说的比较清楚了：http://blog.youkuaiyun.com/onil_chen/article/details/51099443

使用$q可以很好的把金字塔式回调的代码平坦化，并且提供了链式的作用域，以及一个单一的出错处理点。

在这里我们看一段伪代码，来理解我上面提到的这个观点。

[javascript]  view plain  copy

1. var deferred = $q.defer()  
2. var firstFun = func(){  
3. deferred.resolve(data)//在获得数据之后响应resolve  
4.   
5. deferred.reject(error)//在出错时响应reject  
6. }  
7. var secondFun = func(){  
8. deferred.resolve(data)//在获得数据之后响应resolve  
9.   
10. deferred.reject(error)//在出错时响应reject  
11. }  
12. var thirdFun = func(){  
13. deferred.resolve(data)//在获得数据之后响应resolve  
14.   
15. deferred.reject(error)//在出错时响应reject  
16. }  
17.   
18. deferred.promise.then(firstFun)  
19. .then(secondFun)  
20. .then(thirdFun )  
21. .then(function(data){  
22. //处理正确数据  
23. },function(error){  
24. //在上述任何一个函数中发生错误，都会想要这个错误处理函数  
25. })  

--- 转自：http://blog.youkuaiyun.com/onil_chen/article/category/6113346 ---