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

好久没有更新博客了，刚好最近对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__

公众号最近没时间维护，但还是希望大家关注，谢谢