Angularjs中的$Http与$resource

一.使用$http

$http服务是只能接受一个参数的函数，这个参数是一个对象，包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象，具有success和error两个方法。例如代码：

$http({

   method:"GET",
   url:'/xx/xx'

}).success(function(data,status,headers,config){

//当相应准备就绪时调用

}).error(function(data,status,headers,config){

//当响应错误状态返回时调用

})

这个方法实际上返回了一个promise对象。当promise返回的时候，我们可以将$http方法的运行结果当作变量返回。例如：

var promise = $http({

    method = 'GET', 
    url:'/xx/xx'

});

由于$http方法返回一个promise对象，我们可以在响应返回的时候用then方法来处理回调。如果使用then方法，可以得到一个特殊的参数，它代表了相应对象的成功或者失败信息，还可以接受两个可选的函数作为参数。或者使用success和error进行回调代替。

promise.then(function(resp){
//resp是一个响应对象

},function(resp){

//带有错误信息的resp

})；

或者使用success/error方法：

promise.success(function(data,status,headers,config){

   //处理成功的响应

});

promise.error(function(data,status,headers,config){

    //处理非成功的响应

})

如果响应码在200--299之间，会认为响应是成功的，success回调将被调用，否则Error回调会被调用。注意：如果响应的结果是重定向，XMLHttpRequest会跟进这个重定向。

快捷方法：

$http服务提供了一些顺手快捷的方法供我们使用，这些方法简化了复杂的设置，只需要提供URL和HTTP方法（或者POST或PUT请求中包含的数据）即可。

用这些快捷的方法，可以将上面的$http的GET请求修改成：

$http.get('/xx/xx');

1.get()

这个方法是发送GET请求的快捷方式。get()可以接受两个参数---url（相对或者绝对）config(可选，对象)。get()方法返回HttpPromise对象。

2.delete()

和上面的一样，但是发送的是delete请求。

3.head()

和上面的一样，但是发送的是HEAD请求

4.jsonp()

和上面的一样。

5.post()

这是用来发送post()请求的快捷方式

post请求可以接受3个参数。url，data，config。同样返回一个HttpPromise对象

6.put()
和post一样，同样接受3个参数请求

二.设置对象

我们把$http当作函数来调用时，需要传入一个设置对象，用来说明如何构造XHR对象。例如，下面的$http当作函数来调用：

$http({

    method:'GET',

    url:'/xx/xx',

    params:{

       'username':'user',
    }            

})

method：即是我们设置的http请求方式

params：json数据即可。

data：这个对象将会被当作消息体发送给服务器的数据。通常在发送post请求时使用。例如:

var blob = new Blob(['Hello world'],{'text':'abc'});

$http({

    method = 'post',

    url:'/',
    data:blob

})

timeout:可以指定毫秒，在指定的毫秒数后执行。

三.响应对象

AngularJs传递给then()方法的响应对象包含4个属性

data（字符串或者对象）

这个数据代表转换过后的响应体（如果定义了转换的话）

status（数值型）

响应HTTP状态码

四.缓存HTTP请求

默认情况下，$http服务不会对请求进行本地缓存，在发送单独的请求时，我们可以通过向$http请求传入一个布尔值或者缓存实例来启用缓存。例如：

$http.get('/xx/xx',{cache:true})

.success(function(data){})

.error(function(data){});

第一次发送请求的时候，$http服务会向/xx/xx发送一个GET请求。第二次同发出一个GET请求的时候，$http服务会从缓存中取回请求结果，而不会真的发送一个HTTP GET请求。

由于设置了启动缓存，AngularJs默认会使用$cacheFactory。这个服务是AngularJs在启动时自动创建的。如果想要对AngularJs使用的缓存进行更多的自定义控制，可以传入一个自定义的缓存实例代替true。
例如，可以使用LRU等缓存。

五.拦截器

任何时候我们要是想为请求添加全局变量，例如身份验证，错误处理等，在请求发送给服务器之前或者从服务器返回时对其拦截，是比较好的实现手段。

例如对于身份验证，如果服务器返回401状态码，我们会希望将用户重定向到登录界面。

AngularJs通过对拦截器提供了一个从全局层面对响应进行处理的途径。

在前端里有拦截器，听起来高大上，其实就是$http服务的一个中间件，用来向应用的业务流程中注入新的逻辑。

拦截器的核心是服务工厂，通过向$httpProvider.interceptors数组中添加服务工厂，在$httpProvider中进行注册。

一共有4种拦截器。2种成功拦截器，2种失败拦截器。

request：

response：

requestError：

responseError：

调用模块的.factory()方法来来创建拦截器，可以在服务中添加一种或者多种拦截器：
angular.module('myApp',[])

.factory('myInterceptor',function($q){

    var interceptor = {

        'request':function(config){

             //成功的请求方法
             return config;

        },

        'response':function(response){

             //响应成功
             return response;

         }

         'requestError':function(rejection){

              //请求发生了错误，如果能从错误中恢复，可以返回一个请求或promise。

              return response;

              //或者，可以通过返回一个rejection来阻止下一步
              //return $q.reject(rejection);

         }

        'responseError':function(rejection){

              //请求发生了错误，如果能从错误中恢复，可以返回一个请求或promise。

              return response;

              //或者，可以通过返回一个rejection来阻止下一步
              //return $q.reject(rejection);

        }

    };    
    reutrn interceptor;

})

然后，我们需要使用$httpProvider在.config函数中注册拦截器

angular.module('myApp',[])

.config(function($httpProvider){

    $httpProvider.interceptors.push('myInrerceptor'); 
});

六.使用$resource

$resource服务可以将$http请求转换成save和update等简单形式。我们可以通过$resource服务来处理复杂的细节，而无需自己写重复和繁琐的的业务代码。

用法：

1.加入angular-resource.js文件。

2.将ngResource当作依赖来进行引用：

angular.module('myApp',['ngResource']);
这样就可以使用ngResource服务。

$resource基于HTTP GET方法

两个HTTP GET类型的方法可以接受3个参数：params，successFn(响应成功时的回调函数)，errorFn（响应不成功时的回调函数）

1.get(params,successFn,errorFn)

期望一个JSON类型的响应。例如：

User.get(function(resp){

    //处理响应成功

},function(err){

    //处理错误
})

像这样的不定义具体的参数，get()请求通常用来获取单个资源。

User.get({
     id:'123'

},function(resp){

    //处理响应成功

},function(err){

    //处理错误
})

2.query(params,successFn,errorFn)

期望得到一个JSON格式的资源对象集合。

User.query(function(users){

    //读取集合中的第一个用户
    var user = users[0];

})

query()和get()方法之间的唯一区别就是Angular期望query()方法返回数组。

3个基于非HTTP GET类型的方法

1.save(params,payload,successFn,errorFn) 用于在服务器上生成一个资源

User.save({},{

    name:'Ari'

},function(response){

    //处理响应成功

},function(response){

    //处理非成功响应

})

2.delete(params,payload,successFn,errorFn) 用于在服务器上删除一个实例

User.delete({},{

    id:'123'

},function(response){

    //处理响应成功

},function(response){

    //处理非成功响应
})

3.remove 和delete一样

$resource实例：

上述方法返回数据的时候，响应会被一个原型类所包装，并在实例上添加一些有用的方法。实例对象上会添加下面3个实例方法：

$save()

$remove()

$delete()

这3个方法可以在资源实例上被调用。例如：

User.get({
     id:'123'

},function(resp){

    //处理响应成功

    user,name = "123";
    user.$save();   //save the user

},function(err){

    //处理错误

})    

$resource实例是异步的

这三个方法在调用的时候$resource对象会立即返回一个空对象。由于所有数据都是异步执行，所以这个数据是一个空对象，并不是真实的数据。

当数据从服务器返回后，AngularJs会自动将数据填充上去。

例如：

$scope.user = User.get({id:'123'});

这些方法也提供了回调函数，在数据返回时按照预期的方式调用：

User.get({id:'123'},function(user){

    $scope.user = user;
})

$resource设置对象

1.method是我们需要发送的http请求，他是以下的值之一：GET，POST，DELETE，JSONP，PUT

2.url

3.params

4.isArray：如果isArray设置为true，那么这个动作对象会以数组的形式返回。

5.cache：如果cache属性被设置为true，按么AngularJs会用默认的$http缓存对GET请求进行缓存。

6.timeout：延迟发送。

7.interceptor（对象）：拦截器属性有两个可选的方法：response或responseError。这些拦截器像普通的$http拦截器一样，由$http请求对象调用。

$resource服务

我们将$resource服务当作自定义服务的基础。创建自定义服务给我们的应用进行高度自定义的能力，可以对远程服务进行抽象，并且从控制器和视图中解耦出来。

最后，我们强烈建议在自定义的服务对象内部使用$resource。可以一定意义上保证控制器的清洁。

要创建一个封装$resource的服务，需要将$resource的服务注入到我们用来封装的服务对象中，并且像平时一样调用其方法。

如下所示：

angular.module('MyApp',['ngResource'])

.factory('UserService',[

    '$resource',function($resource){

          return $resource('/xx/xx/:id',{

             id:'@'

          },{

             update:{

                   method:'PUT'
              }

          })

    }    

])