用好ngResource和postman，提高你的開發除錯效率

達觀資料發表於2019-01-24

Postman除錯

本文將主要從angularjs下Resource與RESTful 介面初探，和除錯工具postman的使用介紹這兩個方面，和大家分享方便開發與維護的技巧工具。如有不當之處，還請交流指正。

技巧１：減少開發與運維難度，angularjs下Resource與RESTful 介面初探

現代的專案中前端頁面展現的資料多數是動態變化的，展示資料會涉及到網路請求，從後臺拿取資料，前端進行展示。最初的是ajax 請求,它的步驟原理如下：

用好ngResource和postman，提高你的開發除錯效率

建立過程如下步驟：

1.建立一個XMLHttpRequest物件。（不同的瀏覽器，方法不一樣，可以檢查瀏覽器支援情況）

2.使用 XMLHttpRequest 物件的 open() 和 send() 方法，建立與伺服器的連結併傳送請求。

3.請求被髮送到伺服器時，我們需要執行一些基於響應的任務。就是回撥函式。每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState（5個狀態) 屬性存有 XMLHttpRequest 的狀態資訊。根據readyState和status的值，使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性，獲得來自伺服器的響應。

這個過程還是比較繁瑣,後來就出現了jQuery, 極大地簡化了JavaScript 程式設計.jQueryget() 和 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]);

返回一個資源“類”物件。該物件包含預設資源動作的方法，和可選的自定義的擴充套件動作。預設集合包含以下動作：

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

在實際的專案開發中還可以進行自定義的擴充，例如：

functionresourceConfig($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'

}

};

}

呼叫這些方法將以特定的http方法,目標和引數呼叫ng.$http。資料從伺服器返回後，該物件將是該資源類的一個例項。save，remove，delete動作（$字首）可作為該物件的方法使用。這允許你很容易地對伺服器端資料進行CRUD操作，如：

app.factory('Persons',['$resource', function($resource) {

return$resource('/person/:id', null, {

update: { method:'PUT' }

});

}]);

現在可以在一個controller中獲取一個person 並更新：

var person =Persons.get({ id: 3}),

$id = person.id;

person.content = 'yyy';

Persons.update({ id:$id},person );

類物件或例項物件中的動作方法可以用以下引數進行呼叫：

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

Success回撥以(value, responseHeaders)引數呼叫。Error回撥以(httpResponse)引數回撥。

那麼接下來問題來了，什麼是RESTful Api設計？

REST（表徵性狀態傳輸，Representational State Transfer）是RoyFielding博士在2000年他的博士論文中提出來的一種軟體架構風格。RESTful風格的設計不僅具有更好的可讀性（Human Readable），而且易於做快取以及伺服器擴充套件。REST風格體現在URL設計上：

每個URL對應一個資源
對資源的不同操作對應於HTTP的不同方法
資源表現形式（representation）通過Accept和Content-Type指定

對資源的操作有如下：

GET（SELECT）：從伺服器取出資源（一項或多項）。
POST（CREATE）：在伺服器新建一個資源。
PUT（UPDATE）：在伺服器更新資源（客戶端提供改變後的完整資源）。
PATCH（UPDATE）：在伺服器更新資源（客戶端提供改變的屬性）。
DELETE（DELETE）：從伺服器刪除資源。

綜上所述,個人以為無論是ngresouce的使用還是Restful api 設計風格的使用，目的就是提高複用性，資源請求統一配置處理，提高程式碼可讀性與服務的擴充性，減少開發與運維難度。

技巧2：跟蹤網頁請求，用好除錯工具postman

使用者在開發或者除錯網路程式,需要一些方法來跟蹤網頁請求,Postman在傳送網路HTTP請求方面可以說是Chrome外掛類產品中的代表產品之一,使用十分方便,如下是其主介面 :

用好ngResource和postman，提高你的開發除錯效率

這裡著重說明下post 方法的使用:

請求頭是根據請求引數的形式自動生成的,

請求頭中的Content-Type與請求引數的格式之間是有關聯關係，比如：

post引數格式	Content-Type	引數示例
表單提交	application/x-www-form-urlencoded	username=root&password=123
json提交	application/json	{"username":"root","password":"123"}
xml提交	text/xml	<?xml version="1.0" encoding="utf-8"?>