达观数据：用好ngResource和postman，提高你的开发调试效率

2023-02-26

资源 get post

本文将主要从AngularJS下Resource与RESTful接口初探，和调试工具postman的使用介绍这两个方面，和大家分享方便开发与维护的技巧工具。如有不当之处，还请交流指正。技巧1：减少开发与运维难度，AngularJS下Resource与RESTful接口初探现代的项目中前端页面展现的数

本文将主要从AngularJS下Resource与RESTful 接口初探，和调试工具postman的使用介绍这两个方面，和大家分享方便开发与维护的技巧工具。如有不当之处，还请交流指正。

技巧1：减少开发与运维难度，AngularJS下Resource与RESTful 接口初探

现代的项目中前端页面展现的数据多数是动态变化的，展示数据会涉及到网络请求，从后台拿取数据，前端进行展示。最初的是ajax 请求,它的步骤原理如下：

创建过程有如下步骤：

创建一个XMLHttpRequest 对象。(不同的浏览器，方法不一样，可以检查浏览器支持情况)
使用 XMLHttpRequest 对象的 open() 和 send() 方法，建立与服务器的链接并发送请求。
请求被发送到服务器时，我们需要执行一些基于响应的任务。就是回调函数。每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState(5个状态) 属性存有 XMLHttpRequest 的状态信息。根据readyState和status的值，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性，获得来自服务器的响应。

这个过程还是比较繁琐，后来就出现了jQuery, 极大地简化了 JavaScript 编程。jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据,调用形式如:$.get(URL,callback) 或者$.post(URL,data,callback);

AngularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVW(Model-View-Whatever)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。而对于网络请求，$http几乎是所有ng开发中，都会用到的服务。如果接口不是很多，直接使用$resource服务即可，但是对于很多的后端请求接口，那就很有必要使用ngResource服务。该服务创建资源对象的工厂，该资源对象允许你与RESTful服务端数据资源进行交互。返回的资源对象拥有提供了高层行为的动作方法，从而无需与底层的$http服务进行交互。具体调用如下：

$resource(url[, paramDefaults][, actions]); 
1.

返回一个资源“类”对象。该对象包含默认资源动作的方法，和可选的自定义的扩展动作。默认集合包含以下动作：

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

在实际的项目开发中还可以进行自定义的拓展，例如：

function resourceConfig($resourceProvider) { 
$resourceProvider.defaults.actions = { 
     saveArray: { 
     method: 'POST', 
     isArray: true 
     }, 
     modify: { 
     method: 'PATCH' 
     }, 
     create: { 
     method: 'POST' 
     }, 
     save: { 
     method: 'POST' 
     }, 
     get: { 
     method: 'GET' 
     }, 
     query: { 
     method: 'GET', 
     isArray: true 
     }, 
     update: { 
     method: 'PUT' 
     }, 
     delete: { 
     method: 'DELETE' 
     }, 
     verify: { 
     method: 'POST' 
     } 
     }; 
} 
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.
26.
27.
28.
29.
30.
31.
32.
33.

调用这些方法将以特定的http方法，目标和参数调用ng.$http。数据从服务器返回后，该对象将是该资源类的一个实例。save，remove，delete动作($前缀)可作为该对象的方法使用。这允许你很容易地对服务器端数据进行CRUD操作，如：

app.factory('Persons', ['$resource', function($resource) { 
return $resource('/person/:id', null, { 
update: { method:'PUT' } 
}); 
}]); 
1.
2.
3.
4.
5.

现在可以在一个controller中获取一个person 并更新：

var person = Persons.get({ id: 3}), 
$id = person.id; 
person.content = 'yyy'; 
Persons.update({ id:$id },person ); 
1.
2.
3.
4.

类对象或实例对象中的动作方法可以用以下参数进行调用：

HTTP GET “类”动作: Resource.action([parameters], [success], [error])  // eg:Person.update({id: xxx})； 
non-GET “类”动作: Resource.action([parameters], postData, [success], [error]) 
non-GET 实例动作: instance.$action([parameters], [success], [error]) //eg:person.$update()  
1.
2.
3.

Success回调以(value, responseHeaders)参数调用。Error回调以(httpResponse)参数回调。

那么接下来问题来了，什么是RESTful Api设计?

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