達觀數據：用好ngResource和postman，提高你的開發調試效率

作者：郭權 2019-01-28 11:05:41

本文將主要從AngularJS下Resource與RESTful 接口初探，和調試工具postman的使用介紹這兩個方面，和大家分享方便開發與維護的技巧工具。

本文將主要從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]);

返回一個資源“類”對象。該對象包含默認資源動作的方法，和可選的自定義的擴展動作。默認集合包含以下動作：

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

在實際的項目開發中還可以進行自定義的拓展，例如：

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' 
     } 
     }; 
}

調用這些方法將以特定的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)是Roy Fielding博士在2000年他的博士論文中提出來的一種軟件架構風格。RESTful風格的設計不僅具有更好的可讀性(Human Readable)，而且易于做緩存以及服務器擴展。REST風格體現在URL設計上：