AngularJS中的$resource使用与Restful资源交互(转)

简介:

1.AngularJS中的 $resource

这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了。    
  REST是Representational State Transfer(表征状态转移)的缩写,是服务器用来智能化地提供数据服务的一种方式   
     

  1)我们首先需要引入ng-Resource  模块,在angular之后

  <script src="js/vendor/angular.js"></script> 

  <script src="js/vendor/angular-resource.js"></script>

 

  2) 在我们的应用中需要将其当做依赖进行引用 
  angular.module('myApp', ['ngResource']); 
  
  3)如何使用? 
  $resource服务本身是一个创建资源对象的工厂,返回的$resource对象中包含了同后端服务器进行的交互的高层API. 
  
    var User=$resource('/api/users/:userId',{userId:'@id'}); 

    可以把User对象理解成同RESTful的后端服务进行交互的接口。

 

【HTTP GET类型的方法】

  ①GET请求:  get(params,successFn,errrorFn)

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

 

   //GET /api/users 
   User.get(function(resp){ 
    //处理成功 
    
   },function(err){ 
    //处理错误 
    
   }); 
     
  如果参数中传入了具名参数(我们例子中的参数是id),那么get()方法会向包含id的URL发送请求:    
    //发起一个请求:GET-->/api/users/123 
    User.get({id:'1234'},function(resp){ 
       //success 
    },function(error){ 
       //fail 
    }); 
     
  ②QUERY 请求:query向指定URL发送一个GET请求,并期望返回一个JSON格式的资源对象集合。 
  //发起一个请求 
  User.query(function(users){ 
    //读取集合中的第一个用户 
    var user=users[0]; 
  }); 
     
  query()和get()方法之间唯一的区别是AngularJS期望query()方法返回数组。   

 

   

【非HTTP GET类型的方法】     

  1. save(params, payload, successFn, errorFn) 
  save方法向指定URL发送一个POST请求,并用数据体来生成请求体。save()方法用来在服务器上生成一个新的资源。 payload:代表请求发送的数据体 

   //发送一个请求 with the body {name: 'Ari'}

   User.save({},{name:'Ari'},function(resp){ 
    
   },function(error){ 
    
   }); 
     
 2. delete(params, payload, successFn, errorFn)    
 delete方法会向指定URL发送一个DELETE请求,并用数据体来生成请求体。它被用来在服务器上删除一个实例:    
     
    // DELETE /api/users 
    User.delete({}, { 
        id: '123' 
    }, function(response) { 
    // 处理成功的删除响应 
    }, function(response) { 
    // 处理非成功的删除响应 
    }); 
     
  3. remove(params, payload, successFn, errorFn) 
    remove方法和delete()方法的作用是完全相同的,它存在的意义是因为delete是JavaScript的保留字,在IE浏览器中会导致额外的问题。   
     
    // 发起一个请求: 
    // DELETE /api/users 
    User.remove({}, { 
     id: '123' 
    }, function(response) { 
    // 处理成功的删除响应 
    }, function(response) { 
    // 处理非成功的删除响应 
    }); 

 

2.$resource Restful api 与 ngResoruce

 

 

$http服务提供了一个非常低级的实现,可以用来发送XHR请求,同时它还为你提供了很大的可控性和灵活性。但是,在大多数情况下,我们需要处理对象,以及封装了特定属性和方法的对象模型,例如一个person对象(带有详细信息),或者一个信用卡对象。

        在这些情况下,如果我们能够创建一个JS对象,而且它可以理解并代表这种对象模型,是不是会很棒?如果我们仅仅编辑这个对象的属性,例如保存或者更新,那么这些状态会被持久化到服务端吗?

        $resource就是为这一功能而设计的。AngularJS中的resource(资源)允许我们用描述性的方式来定义对象模型,它可以描述以下内容:

        1.资源在服务端的URL。

        2.常用的请求参数类型。

        3.一些附加的方法(你可以自动获得get、save、query、remove和delete方法),这些方法为对象模型包装了特定的功能和业务逻辑(例如信用卡对象的charge()方法)。

        4.期望获得的响应类型(一个数组或者一个对象)。

        5.协议头。

        使用Angular所提供的$resource对象,你可以根据各种需求查询服务器;除此之外,你还可以把服务端返回的对象当成已经持久好的数据模型,你可以修改它们,并且可以把它们持久化。

        ngResource是一个独立的、可选的模块。为了使用它,需要:

a.在加载的脚本文件中包含angular-resource.js

b.在模块依赖声明中包含ngResource(例如,angular.module('myModule', ['ngResource']))。

c.在需要的地方使用注入的$resource服务。

        在学习如何使用ngResource方法创建资源之前,我们先来看看使用基本的$http服务创建类似的东西需要做些什么事情。对于我们的信用卡资源来说,除了要能够对它进行"change"(收费)操作之外,我们还要能够get(获取)、query(查询)以及save(保存)信用卡。

        以下是一种可能的实现:

[js]  view plain  copy
 
  1. myAppModule.factory('CreditCard', ['http', function($http) {  
  2.  var baseUrl = '/user/123/card';  
  3.  return {  
  4.  get: function(cardId) {  
  5.  return $http.get(baseUrl + '/' + cardId);  
  6. },  
  7.  save: function(card) {  
  8.  var url = card.id ? baseUrl + '/' + card.id : baseUrl;  
  9.  return $http.post(url, card);  
  10. },  
  11.  query: function() {  
  12.  return $http.get(baseUrl);  
  13. },  
  14.  charge: function(card) {  
  15.  return $http.post(baseUrl + '/' + card.id, card, {params: {charge: true}});  
  16. }  
  17. };  
  18. }]);  

        除了这种方式之外,还可以简单地创建一个Angular服务,这个服务将会通过以下方式来描述应用所提供的资源:

[js]  view plain  copy
 
  1. myAppModule.factory('CreditCard', ['$resource', function($resource) {  
  2.  return $resource('/usr/:userId/card/:cardId',  
  3.  {userId: 123, cardId: '@id'},  
  4.  {charge: {method: 'POST', params: {charge: true}, isArray: false});  
  5. }]);  

        现在,只要向我们AngularJS注射器请求一个CreditCard实例,我们就可以获取一个Angular资源,它默认为我们提供了一些基础的方法。下表列出了这些方法的内容以及它们的行为,有了这些信息你就知道应该如何配置服务端了。         下面我们来看一个信用卡的实例,这会让我们的思路更加清晰。

[js]  view plain  copy
 
  1. //假设CreditCard服务被注入到了这里  
  2.   
  3. //我们可以从服务端获取一个集合,请求的路径为GET:/user/123/card  
  4. var cards = CreditCard.query();  
  5.   
  6. //我们还可以在回调函数中获取并使用单张信用卡  
  7. CreditCard.get({cardId: 456}, function(card) {  
  8. //每个实例都是CreditCard类型  
  9.  expect(card instanceof CreditCard).toEqual(true);  
  10.  card.name ="J.Smith";  
  11. //非GET型的方法被映射到了实例上  
  12. card.$save();  
  13.   
  14. //我们自定义的方法也被映射上去了  
  15. card.$charge({amount:9.99});  
  16. //发起一个POST请求:/user/123/card/456?amount=9.99&charge=true  
  17.  //发送请求时传递的数据为:{id:456, number: '1234', name: 'J.Smith'}  
  18. });  

        这个例子涉及了比较多的内容,对于其中比较重要的内容依次介绍如下:

一.声明

        无论是自已定义$resource,还是使用正确的参数来调用注入的$resource函数,操作都非常简单。

        $resource函数有一个必需的参数,即可用资源的URL地址,还有两个可选的参数,即默认参数以及你想配置在资源上的额外动作。

        请注意URL是参数化的(用:来标识参数。:userId表示userId将会被替换成对应的文本,:cardId表示将会被cardId实参的值替换掉)。如果没有传递参数,对应的标识符会被替换成空字符串。

        第二个参数负责处理每一个请求中都会被发送的默认值。在当前这个例子中,我们会把常量123传递给userId。参数cardId更加有趣,“cardId是"@id."”表示的是,如果我们正在使用一个从服务端返回的对象,那么当调用这个对象上的任意方法时(例如调用对象的$save方法),对象上的id属性值就会被赋给cardId参数。

        第三个参数是另一个函数,我们希望在自定义的资源上暴露这个函数。

 

二.自定义方法

        调用$resource时,传递的第三个参数是一个可选的。我们希望在自已的资源上暴露的方法。

        在前面的例子中,我们指定了一个charge方法,可以通过传递一个对象来配置这个方法,对象中的key就是需要暴露的方法名称。配置项中需要指定的内容有:请求的类型(GET、POST等)、需要作为请求的一部分来传递的参数(在这个例子中就是charge=true),以及返回的结果是否是一个数组(在这个例子中不是)。一旦做完这些事情之后,你就可以自由地调用CreditCard.charge()了

        说明:这是一种非常灵活的编码风格,根据上面的代码,对于配置对象{charge: {method: 'POST', params: {charge: true}, isArray: false},Angular会将其解析成一个方法,然后把这个方法绑定到返回的Restful对象上,上面的配置对象解释之后的方法为:

[js]  view plain  copy
 
  1. CreditCard.charge = function(charge, isArray) {  
  2. //这里是方法体  
  3. }  

 

三.别用回调!(除非你真的需要它们)

        第三个需要注意的内容是调用资源时的返回值类型。请再看一下CreditCard.query()调用,我们直接把信用卡对象赋值给了card变量,而并没有在回调函数里面进和赋值。你可能会担心在对服务器进行异步请求的情况下,这种代码能运行吗?

        你这种担心是合理的。但事实上,这段代码完全正确,并且能够运行。这里发生的事情是,AngularJS赋给了card对象一个引用(一个对象或者数组,具体是什么需要根据所期望的返回值类型而定),在未来的某个时间上,当对服务器的请求返回来之后,这个引用才会被真正赋值。在些期间,引用对象一直是空的。

        对于AngularJS应用来说,最常见的处理流程是:到服务器上获取数据,然后把数据赋值给变量,再把数据显示到模板中。这种快捷方式是非常好用的。在控制器代码中,你唯一要做的事情就是发起对服务端的调用,把返回值赋给正确的作用域变量,然后让模板自动负责渲染它。由于card变量是使用{{}}这种数据绑定技术绑定到视图上的,所以一开始给它一个空值并没有问题,等异步响应返回之后再把结果赋给它。这时候Angular的数据绑定机制会立即发现数据发生了变化,然后会自动通知视图进行刷新。从这里可以看到,使用Angular框架时,对异步调用的很多处理方式已经发生了细微的变化。

        如果你有一些需要依赖于返回值才能执行的业务逻辑,那么这种方法就不会奏效。在这种情况下,你就需要使用回调函数,这个回调函数会在调用CreditCard.get()的时候被使用。

 

四.简化服务端操作

        无论你使用返回值的快捷方式,还是使用回调函数,都有一些关于返回对象的注意事项。返回值不是普通的JS对象,而是一个"resource"型的对象。这就意味着,除了服务端返回的数据之外,它上面还带有一些附加的行为(在这个例子中就是$save()和$charge())。这样可以让你更容易进行服务端调用,例如获取数据、修改数据,以及把修改的内容持久化到服务端(也就是在很多应用中都很常见的CRUD操作)。

 

五.何时可以使用Angular资源

        只有服务端按照RESTful的方式工作的时候,你才可以使用Angular资源。对于信用卡场景,它需要:

        1.一个到/user/123/card的GET请求,它会返回用户123的信用卡列表。

        2.一个到/user/123/card/15的GET请求,它会返回用户123的ID为15的信用卡。

        3.一个到/user/123/card的POST请求,在POST的数据中带有信用卡信息,它将会为用户123的ID创建一张新的信用卡。

        4.一个到/user/123/card/15的POST请求,POST的数据中带有信用卡信息,它将会更新用户123的ID为15的信用卡信息。

        5.一个到/user/123/card/15的DELETE请求,它将会删除用户123的ID为15的信用卡信息。

 

 

 

 

我发现一个Angular JS中的关键问题是(以我喜欢的代码工作方式来说)$save方法在ngResource中将只会使用POST沿着有效载荷提交到服务器。新建和更新记录操作都是这样的,对来自服务器的新和旧的对象都是如此。这破坏了 RESTful约定的更新操作应该使用PUT或者PATCH操作。我下面建议的解决方案拓展了现有的ngResource实现,提供了更多的默认选项,同时精简了我们的工作流程。完美的用法(恕我直言)应该像下面这样:

1
2
3
4
5
6
7
var  user =  new  User;
user.name =  'Kirk Bushell' ;
user.$save();  // POST
 
var  user = User.get( { id: 1 });
user.name =  'John smith' ;
user.$save();  // PUT

    如果我们深入ngResource的代码中,这样的需求是可能的,关于怎么样去简化它的实现(这应该是由 Angular 的团队来完成)。不幸的是,它的确意味着如果我们想要同时用POST/PUT来实现保存操作,我们不得不用两个不同的方法(这不是我的风格)。恕我直言,保存就是保存 --- 让你的模块/类 来定义这是什么样的保存(新建或是更新)操作。我们需要做的是用我们自己的默认实现来拓展ngResource提供的 $resource工厂。让我们接着看下去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var  module = angular.module(  'my.resource' , [  'ngResource'  ] );
 
module.factory(  'Resource' , [  '$resource' function ( $resource ) {
    return  function ( url, params, methods ) {
     var  defaults = {
       update: { method:  'put' , isArray:  false  },
       create: { method:  'post'  }
     };
     
     methods = angular.extend( defaults, methods );
 
     var  resource = $resource( url, params, methods );
 
     resource.prototype.$save =  function () {
       if  ( ! this .id ) {
         return  this .$create();
       }
       else  {
         return  this .$update();
       }
     };
 
     return  resource;
   };
}]);

    这里我们定义了一个自定义模块 - my.resource,这个模块可以被注入到其他你想要这个拓展功能的模块中。我们接着以一个依赖为我们的Resource工厂注入$resource,并做一些小魔法,让我们研究下吧。

    首先,我们定义了一个新的默认数组。它包括了为resource的更新update和新建create方法 - create方法将会被定义成一个POST请求,update方法将会被定义成一个PUT请求。我们为什么会想要这两个额外的方法?因为它允许我们做更明确的请求,正因如此,我们需要重载$save方法!

    我们拓展了任何我们会提供给resource的方法。然后,我们定义我们的新resource和通过重载$save方法拓展它。这个方法会检查id字段是否包含在一个资源对象中,如果有id字段,它将会调用我们定义在default中的$update方法;如果没有id字段,它会调用$create方法,很简单吧!

    但是 - 我们怎么在我们自己的资源中使用它呢?小菜一碟。

1
2
3
4
5
var  module = angular.module(  'services' , [  'my.resource'  ] );
 
module.factory(  'User' , [  'Resource' function ( $resource ) {
   return  $resource(  'users/:id' , { id:  '@id'  } );
}]);

    现在你可以看到 - 我们对待它就像对待其他的资源一样注入,唯一的区别是 - 我们定义了我们的 $resource依赖于我们自己进行拓展ngResource 后的Resource。

 

 

 

3..AngularJS Resource 与 Restful API的交互

 

REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格。RESTful风格的设计不仅具有更好的可读性(Human Readable),而且易于做缓存以及服务器扩展(scalability)。REST风格体现在URL设计上:

  • 每个URL对应一个资源
  • 对资源的不同操作对应于HTTP的不同方法
  • 资源表现形式(representation)通过AcceptContent-Type指定

AngularJS提供了$resourceService来更方便地与RESTful服务器API进行交互,可以方便地定义一个REST资源,而不必手动所有的声明CRUD方法。

参考文档: https://docs.angularjs.org/api/ngResource/service/$resource

Resource Factory

$resourceService定义在ngResourceModule中,需要在你的HTML中引入这个Module对应的JS,同时在你的APP中添加这样一个依赖:

var app = angular.module('helloApp, ['ngResource']); 

然后为资源建立一个Factory:

app.factory('Notes', ['$resource', function($resource) { return $resource('/notes/:id'); }]); 

当然,你也可以不把$esource的实例放到Factory里,直接在控制器中存起来:var Notes = $resource('/notes/:id)

CRUD

在你的控制器中就可以对资源进行增删改查了:

app.controller('NotesCtrl', ['$scope', 'Notes', function($scope, Notes) { var notes = Notes.query(function(){ // GET: /notes // Response: [{id: 1, content: 'hello'}, {id: 2, content: 'world'}]; var first = notes[0]; first.content = 'halo'; first.$save(); // POST: /notes/1 {id: 1, content: 'halo'} // Response: {id: 1, content: 'halo'} second.$delete(); // DELETE: /notes/2 }); var note = new Notes({content: 'xxx'}); note.$save(); // POST: /notes // Response: {id: 3, content: 'xxx'} }]); 

PUT 操作

$resource提供了五种默认操作:getquerysaveremovedelete。你可以配置一个update操作来完成HTTP PUT:

app.factory('Notes', ['$resource', function($resource) { return $resource('/notes/:id', null, { update: { method:'PUT' } }); }]); 

现在,你可以在控制器中获取一个note并更新它:

var note = Notes.get({ id: 3}), $id = note.id; note.content = 'yyy'; Notes.update({ id:$id }, note); // PUT /notes/3 {id: 3, content: 'yyy'} 

现在你的Notes有六种操作了。这些操作有两种调用方式:

  1. 通过资源类调用,例如:Notes.update({id: xxx})
  2. 通过资源实例调用,例如:note.$update(),此时操作名需加前缀$

具体的调用参数可参考文档:

HTTP GET "class" actions: Resource.action([parameters], [success], [error])

non-GET "class" actions: Resource.action([parameters], postData, [success], [error])

non-GET instance actions: instance.$action([parameters], [success], [error])

其中,success参数为(value, responseHeaders),error参数为(httpResponse)

属性/URL映射

上述例子中,我们看到note对象的id属性会映射到URL中的:id/notes/:id)。如果你的业务更加复杂,可以手动配置这个映射关系。例如:

var Notes = $resouce('/users/:userId/notes/:noteId', { noteId: '@id', userId: '@owner' } 

将会读取noteownerid属性来生成URL,比如删除note时:

// note === {id: 123, owner: 'alice', content: 'hello'}
note.$delete(); // DELETE: /users/alice/notes/123 

在构造$resource时,多于的属性映射会成为URL Query。例如:

var Notes = $resouce('/notes/:id', { id: '@id', user: '@owner' }); // note === {id: 123, owner: 'alice', content: 'hello'} note.$delete(); // DELETE: /notes/123?user=alice 

REST操作的声明和调用中,多于的属性会成为URL Query。例如:

var Notes = $resouce('/notes/:id', {id: '@id'}, { update: {method: 'PUT', operator: 'bob'} }); // note === {id: 123, content: 'hello'} note.$update({trusted: true}); // PUT: /notes/123?operator=bob&trusted=true {id: 123, content: 'hello'} 

响应转换

有时基于既定的后台设计,无法提供完全RESTful的API,比如/notes返回的是一个分页器对象,而非数组。此时,我们仍然可以使用$resource,但需要设置响应转换回调。例如:

var Notes = $resouce('/notes/:id', null, { pager: { method: 'GET', transformResponse: function(data, headers){ // Server respond: // data = {currentPage: 1, // totalPage: 20, // pageSize: 2, // content: [{id: 1, content: 'hello'}, {id: 2, content: 'world'}]} var pager = JSON.parse(data); return pager.content; } } }); var notes = Notes.query(function(){ // GET: /notes // notes === [{id: 1, content: 'hello'}, {id: 2, content: 'world'}] }); 

类似响应重写,你还可以设置请求转换transformRequest

虽然$resource的设计可以支持绝大多数的URL和内容表示设计,但如果你发现$resource的使用过程极其复杂,那可能是你的服务器API并不满足RESTful风格。

相关文章
|
1月前
|
前端开发
SpringMVC-RESTful快速开发及案例:基于RESTful页面数据交互
SpringMVC-RESTful快速开发及案例:基于RESTful页面数据交互
44 0
|
10月前
|
API 数据库 网络架构
Flask进阶:构建RESTful API和数据库交互
在初级教程中,我们已经介绍了如何使用Flask构建基础的Web应用。在本篇中级教程中,我们将学习如何用Flask构建RESTful API,以及如何使用Flask-SQLAlchemy进行数据库操作。
|
自然语言处理 人机交互 API
阿里云智能语音交互中长文本语音合成服务的restful api 中python3调用
智能语音交互产品基于语音识别、语音合成、自然语言理解等技术,实现“能听、会说、懂你”式的智能人机交互体验,适用于智能客服、质检、会议纪要、实时字幕等多个企业应用场景,长文本语音合成功能提供了将超长文本(如千字或者万字)合成为语音二进制数据的功能,此篇文章简单介绍基于python的简单调用
978 0
阿里云智能语音交互中长文本语音合成服务的restful api 中python3调用
|
5天前
|
存储 前端开发 安全
Nuxt3 实战 (十):使用 Supabase 实现 RESTful 风格 API 接口
这篇文章介绍了如何使用Supabase实现RESTful风格的API接口,用于网站分类和子站点的增删改查(CURD)功能。文章首先阐述了表设计,包括ds_categorys和ds_websites两张表的列名、类型和用途,并提到了为每张表添加的user_id和email字段以支持用户身份识别。接着,文章描述了接口设计,以ds_websites表为例,说明了如何通过RESTful API实现CURD功能,并给出了使用SupabaseClient实现插入数据的相关代码。文章最后提供了项目效果预览和总结,指出学习了Nuxt3创建接口及调用Supabase数据库操作。
Nuxt3 实战 (十):使用 Supabase 实现 RESTful 风格 API 接口
|
9天前
|
XML JSON API
探索RESTful API设计的最佳实践
【6月更文挑战第15天】在数字化时代,API已成为连接不同软件系统和促进数据交换的桥梁。本文将深入探讨如何设计高效、可维护且易于使用的RESTful API,包括资源命名、HTTP方法的正确使用、状态码的精确定义以及响应格式的设计原则。通过遵循这些最佳实践,开发者可以构建出更加健壮和用户友好的后端服务。
|
3天前
|
缓存 前端开发 API
深入理解RESTful API设计原则与最佳实践
【6月更文挑战第21天】在现代Web开发中,RESTful API已成为构建可伸缩、易维护网络服务的重要基石。本文将探讨RESTful API的核心设计原则,揭示其背后的哲学思想,并提供一系列最佳实践来指导开发者如何创建高效、可靠的API接口。从资源定位到HTTP方法的恰当使用,从状态管理到API版本控制,我们将一探究竟,帮助开发者避免常见的陷阱,构建出既符合标准又易于交互的后端服务。
|
5天前
|
XML 安全 API
API攻防-接口安全&SOAP&OpenAPI&RESTful&分类特征导入&项目联动检测
API攻防-接口安全&SOAP&OpenAPI&RESTful&分类特征导入&项目联动检测
|
5天前
|
JSON API 数据格式
如何使用Flask开发RESTful API
RESTful API(Representational State Transferful Application Programming Interface)是一种基于 REST 架构风格设计的 Web 服务接口,用于实现资源的增删改查(CRUD)操作。它通过使用 HTTP 协议的不同方法(如 GET、POST、PUT、DELETE)和 URL 路径来对资源进行操作,并使用不同的状态码和数据格式进行响应。
18 1