• 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__
    公众号最近没时间维护,但还是希望大家关注,谢谢









  • 相关阅读:
    HDFS文件读写操作(基础基础超基础)
    LeetCode & Q35-Search Insert Position-Easy
    LeetCode & Q27-Remove Element-Easy
    LeetCode & Q26-Remove Duplicates from Sorted Array-Easy
    LeetCode & Q1-Two Sum-Easy
    Full-Stack-Fundation-Udacity------Lesson 1 Working with CRUD
    利用封装、继承对Java代码进行优化
    排序算法——冒泡排序
    排序算法——希尔排序
    排序算法——直接插入排序
  • 原文地址:https://www.cnblogs.com/xiaohuoni/p/7642294.html
Copyright © 2020-2023  润新知