白话$resource,$resource中的增删改查
前言
$resource详解,在学习angular的过程中,我们已经知道,$http能十分便捷的为我们实现与后端的数据交互,格式如下:
$http({method:'GET'},url:'XX').then(successFun,errorFcun)
选好交互方式(method是GET或者POST),填好地址(url是你要交互的后台地址),然后在成功(successFun)以及失败(errorFun)回调函数中分别去处理反馈回来的数据,这个容易理解,直到遇到angular中另一种数据交互方式$resource时,我觉得有必要着重整理记下笔记了。
1.$resource是个啥,$resouce起步
$resource是angularjs提供的另一种数据交互方式,它其实一个$resourced对象集合体,这个集合体中包含了五类常用的交互方式,比如get,remove.....我们可以直接使用它们(后面详细说),与$http相比,它的交互方式其实更为灵活,我们除了可以使用它体现提供的方法API外,它更支持用户自定义交互方法。它不像$http在控制器controller中申明就可以直接使用,angular并未包含$resource服务,所以我们需要额外去引用它。例如,在引用angularjs后还需引用$resouce的js文件(目录根据自己情况来):
引用之后,我们还得在应用申明时去注入它,假设咱们有个app应用,如下:
var app = angular.module("myApp",["ngResource"])
这样,我们就可以在后续的开发中直接使用它而不报错了。
2. $resource对象与它包含的五类方法
2.1 理解$resource对象
假设,我们在网上一家百货店买了一些日用品到货了,由于你不在家,师傅给你丢在你楼下一家超市了,需要自己去自取,那现在最重要的,我们需要知道是楼下2家超市的哪一家(交互的后台url地址),去了超市,老板说你自己去那一堆快递里自己拿吧,我懒得管你,还好,快递在,然后我们取回了一个大箱子(一个$resource对象),箱子里是一些可以分别使用的工具,你只需要分别取使用它们就OK了。那么现在我们来看看$resouce对象的获取方法:
var url = "http://xxx/xxx/xxx"
app.controller("myCtrl",function($scope,$resource){ var Entry = $resource(url); )}
其中,url就是咱们数据交互的地址,而Entry就是咱们拿到手的一大箱东西了,知道地方咱们直接去拿,拿回来怎么用那就是后话,问题不大,那现在我们拆箱好好使用箱子里面的这些东西。
2.2 $resource中的方法
2个get类型
1.get(params,successFn,errorFn)
2.query(params,successFn,errorFn)
3个非get类型
3.save(params,payload,successFn,errorFn)
4.remove(params,payload,successFn,errorFn)
5.delete(params,payload,successFn,errorFn)
那括号里面分别代表什么意思呢?
params:跟随请求一起发送的参数,比如,查询条件。
payload:跟随请求一起发送的数据体,比如把要存的数据。
successFn:请求成功函数,在这里咱们可以根据自己需求去处理返回的数据。
errorFn:失败函数,会返回包含status状态码等参数,咱们可以根据这个判断哪里出错了。
2.2.1 get()--查
首先说说get(),我们先看个例子:
//地址这里根据实际的来
var url = "http://xxx/xxx/xxx/:id";
//控制器中开始使用 app.controller("myCtrl",function($scope,$resource){
//第一次取快递,把$resource对象存在Entry中了 var Entry = $resource(url);
//第二次取快递,更详细的数据交互
Entry.get({ 'id':3312 },function(resp){
//处理成功函数
$scope.message = resp; },function(err){
//处理失败函数 console.log(err); }) )}
咱们可以把这段代码理解为取两次快递
第一次取快递,咱们把$resouce对象保存在了Entry中
第二次取快递,咱们的又一个快递到了,还是丢在了那家超市,由于第一次咱们去过那家超市了就直接去取吧,不过这次老板就比较负责了,需要你提供下手机号码后四位数,那么我的尾数是3312(id:3312),于是老板就把3312的这个快递(这条数据)给我们了。于是咱们完成了第二次较为详细的http请求。
地址虽然没变,但是却多了一个对手机号码的流程,所以在上述代码url结尾有个":id",这个用处就是用来单一条件查询用的。
咱们之所以能直接使用Entry.get()就能获取到对应地址的数据,是因为Entry在赋值保存时已经包含了地址信息,所以get没必要再次提供地址。
2.2.2query():--查
Entry.query(function(messages) { // 读取集合中第一条数据 $scope.message= messages[0]; });
query也属于get请求,但与get相比,它更常用语获取大量数据的数组,而get更适合加上ID去获取某一条数据。
2.2.3save()--增
Entry.save({ "id": 10000, "age": "25", "name": "小钻风", },function(resp){ $scope.message = resp; },function(err){ console.log(err); })
存储一条包含id,age以及name属性的一条数据
save用于像后端存储一条新的数据,需要注意的是,当你想修改某条已经存在的数据时,不要想着找到对应id数据后利用save进行覆盖更新,这是会报错的,因为save本质是新增数据,并不能用于存储覆盖现有数据。
2.2.4delete()与remove()--删
Entry.remove({ 'id':10000 },function(resp){ $scope.message = resp; },function(err){ console.log(err); })
找到id为10000的数据,并且删除掉这条数据
这对兄弟功能以及使用完全一样,那为啥要存在2个呢,那是因为delete是JS的保留字,在IE中使用会存在其它报错问题,所以保险起见,还是直接用remove进行删除吧。
3.$resource中的自定义方法
我们在前面说了增删查,那我们要改已经存在库里面的数据咋办,而且也说了,save只能新增,并不能修改,那这时候就得自定义一个修改的方法了。
其实在获取$resource对象时,除了单一提供url参数外,其实还有其他的可选参数,我们看看如何定义一个修改:
var Entry = $resource(url,{},{ update:{ method:'PUT' } });
上述代码分为两步,第一,获取$resource对象,同时封装了一个update的方法,第二部,使用update找到id为10000的数据,将其覆盖为我们后面提供的数据。
这里我们定义的method为put,简单提下PUT: 把消息本体中的消息发送到一个URL,通常用于向服务器发送请求,如果URI不存在,则要求服务器根据请求创建资源,如果存在,服务器就接受请求内容,并修改URI资源的原始版本。
update是我们自定义的方法名,你想取啥就取啥,当然在使用时你得跟你上面定义的一样,在update中其实还可以定义更多属性,如下:
$resource(url,{},{ update:{ method:'', //送HTTP请求的方法 url:'', //为该方法的具体路由设置的URL params:{}, isArray:boolean, //为ture此动作返回数组 transformRequest:函数或者函数数组 transformResponse:函数或者函数数组 cache:布尔型或缓存对象 timeout:数值或promise对象 withCredentials:布尔类型 responseType:字符串,用来设置XMLHttpRequestResponseType属性 } })
先整理到这吧。