关于$resource的使用

Open hjzheng opened this issue 9 years ago • 0 comments

什么是 $resource ?

$resource 是基于 $http 基础之上的一个 AngularJS 的服务，特别擅长与 RESTful 进行交互。

什么是RESTful ?(摘自RESTful API编写指南)

RESTful API的开发和使用，无非是客户端向服务器发请求（request），以及服务器对客户端请求的响应（response）。本真RESTful架构风格具有统一接口的特点，即，使用不同的http方法表达不同的行为：

GET（SELECT）：从服务器取出资源（一项或多项）

POST（CREATE）：在服务器新建一个资源

PUT（UPDATE）：在服务器更新资源（客户端提供完整资源数据）

PATCH（UPDATE）：在服务器更新资源（客户端提供需要修改的资源数据）

DELETE（DELETE）：从服务器删除资源

客户端会基于GET方法向服务器发送获取数据的请求，基于PUT或PATCH方法向服务器发送更新数据的请求等，服务端在设计API时，也要按照相应规范来处理对应的请求，这点现在应该已经成为所有RESTful API的开发者的共识了，而且各web框架的request类和response类都很强大，具有合理的默认设置和灵活的定制性，Gevin在这里仅准备强调一下响应这些request时，常用的Response要包含的数据和状态码（status code），不完善的内容，欢迎大家补充:

当GET, PUT和PATCH请求成功时，要返回对应的数据，及状态码200，即SUCCESS

当POST创建数据成功时，要返回创建的数据，及状态码201，即CREATED

当DELETE删除数据成功时，不返回数据，状态码要返回204，即NO CONTENT

当GET 不到数据时，状态码要返回404，即NOT FOUND

任何时候，如果请求有问题，如校验请求数据时发现错误，要返回状态码 400，即BAD REQUEST

当API 请求需要用户认证时，如果request中的认证信息不正确，要返回状态码 401，即NOT AUTHORIZED

当API 请求需要验证用户权限时，如果当前用户无相应权限，要返回状态码 403，即FORBIDDEN

最后，关于Request 和 Response，不要忽略了http header中的Content-Type。以json为例，如果API要求客户端发送request时要传入json数据，则服务器端仅做好json数据的获取和解析即可，但如果服务端支持多种类型数据的传入，如同时支持json和form-data，则要根据客户端发送请求时header中的Content-Type，对不同类型是数据分别实现获取和解析；如果API响应客户端请求后，需要返回json数据，需要在header中添加Content-Type=application/json。

如何使用？(更多 https://docs.angularjs.org/api/ngResource)

安装:

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

一个 provide 和一个 serveice
- $resourceProvider 用于配置 $resource 的默认行为，例如支持的默认方法
- $resource 用它来和 RESTful 进行交互
使用

angular.module('app').service('UserResource', function($resource) {
     return $resource('/users/:id', {id: '@_id'}, {
         update: {
                method: 'PUT'
         }
      });
});

UserResource 会默认根据规律生成五个 RESTful 请求的方法在 UserResource 上

{ 
  'get':    {method:'GET'},
  'save':   {method:'POST'},
  'query':  {method:'GET', isArray:true},
  'remove': {method:'DELETE'},
  'delete': {method:'DELETE'}
};

你可以这样调用它们官方给出的用法是

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])

// 第一个参数，用法如下
// Given a template /path/:verb and parameter {verb:'greet', salutation:'Hello'} results 
// in URL /path/greet?salutation=Hello.
// 第二个参数是 success 回调函数 拿到请求结果
// 第三个参数是 error 回调函数，这里省略掉了
UserResource.get({id: 1}, function(data) {
    console.log(data);
});

// 第一个参数，添加到 request body
// 第二个参数是 success 回调函数 拿到请求结果
// 第三个参数是 error 回调函数，这里省略掉了
UserResource.save({name: 'haha', grade: 99}, function(data) {
     console.log(data);
});

// 第一个参数，对象，查询条件
// 不传第一个参数，查询所有结果
// 其他参数与 get 相同
UserResource.query(function(data) {
     console.log(data);
});

//第一个参数 和 get 一样
// 第二个参数是 success 回调函数 拿到请求结果
// 第三个参数是 error 回调函数，这里省略掉了
UserResource.delete({id: 1}, function(data) {
     console.log(data);
});

同样的 UserResource 的实例也生成了以$开头的方法， $save 和 $delete

// 这里例子同样也省略了 error 回调函数
var user3 = UserResource.get({id: 3}, function(data) {
     user3 = data;
});

user3.name = 'Test';
user3.$save(function(data) {
    console.log(data);
 });

user3.$delete({id: user3.id}, function(data) {
     console.log(data);
});

再看这个例子中 $resource 的第三个参数，自定义一个 update 方法

angular.module('app').service('UserResource', function($resource) {
     return $resource('/users/:id', {id: '@_id'}, {
         update: {
                method: 'PUT'
         }
      });
});

//第二参数 为 request body 中的内容
UserResource.update({id: 3}, {name: 'hurry', grade: 100}, function(data) {
    console.log(data);
});

user3.$update({id: 3}, function(data) {
    console.log(data);
});

扩展 UserResource 的实例对象

 angular.module('app').service('UserResource', function($resource) {
     var User = $resource('/users/:id', {id: '@_id'}, {
         update: {
                method: 'PUT'
         }
      });
     User.prototype.isPass = function() {
         return this.grade >= 60;
     };
     return User;
});

当请求不符合 RESTful 时候, 通过第三个参数进行重写

 angular.module('app').service('BookResource', function($resource) {
      var Book = $resource('/book?id=:id', {id: '@_id'}, {
           list: {
               method: 'GET',
               url: '/book/list',
               isArray: true
           },
           save: {
                method: 'POST',
                url: '/book/save'
           },
           delete: {
                method: 'GET',
                url: '/book/delete'
            }
       });
       return Book;
});

本例中所有代码包括后端的 mock 请参考 $resource Example 参考资料: https://www.sitepoint.com/creating-crud-app-minutes-angulars-resource/

Jun 20 '16 18:06 hjzheng