目錄
$http幾乎是所有ng開發中,都會用到的服務.本節將重點說下$http 與 ngResource
$http
使用：$http(config);
參數：
method：字符串，請求方法。
url：字符串，請求地址。
params：字符串或者對象，將使用paramserializer序列化並且作為GET請求的參數。
data：字符串或者對象，作為請求信息數據的數據。
headers：對象，字符串或者函數返回表示發送到服務器的HTTP請求頭。如果函數的返回值為空，則headers則不發送。函數接受一個配置對象作為參數。
xsrfHeaderName：字符串，填充XSRF令牌的HTTP請求頭名稱。
xsrfCookieName：字符串，含有XSRF令牌cookie的名字。
transformRequest：函數/函數的數組。轉換函數或者一個包含轉換函數的數組。轉換函數獲取http請求體和請求頭，並且返回他們的轉換版（通常是序列化）。
transformResponse：函數/函數的數組。轉換函數或者一個包含轉換函數的數組。轉換函數獲取http響應體和響應頭，並且返回他們的轉換版（通常是序列化）。
paramSerializer：字符串或者返回字符串的函數。用於編寫請求參數（指定為對象）的字符串表示形式的函數。如果指令是字符串，那么將被解釋為通過$injector注冊的函數，這意味着你能通過注冊服務方式創建你自己的序列化程序。默認的序列化是$httpParamSerializer；或者你可以使用$httpParamSerializerJQLike。
cache：boolean，如果為true，一個默認的$http緩存將被作為請求的緩存，否則如果存在一個用$cacheFactory創建的緩存實例，則將用於緩存。
timeout：數值，毫秒，超時則讓請求中止。
withCredentials：boolean，是否設置withcredentials flag的XHR對象。查看更多信息的憑據。
responseType：字符串，響應頭類型。
但通常我們這樣在ng中這樣使用http服務.
angular.module('myApp', []).controller('helloCtrl', ['$http', function (http) {
var url = '/index.html';
http.get(url)
.success(function (data, status, headers, config) {
console.log('請求內容:' + data);
}).error(function (data) {
console.warn('請求錯誤:' + data);
});
}]);
我們也可以通過ng的promise實現.2者結果一致
http.get(url)
.then(function (rsp) {
debugger;
console.log('請求內容:' + rsp.data);
}, function (rsp) {
console.warn('請求錯誤:' + rsp.data);
});
在ng中,http服務還支持快捷方法有
createShortMethods('get', 'delete', 'head', 'jsonp')
和
createShortMethodsWithData('post', 'put', 'patch')
在方法createHttpBackend中,定義了ng http發送請求的核心代碼.
配置http
angular.module('myApp', [], function ($httpProvider) {
//為所有請求設置Auth頭
$httpProvider.defaults.headers.common['Authorization'] = 'Bearer xx';
//為所有GET請求設置DO NOT TRACK(默認情況下 get不在defaultheaders里)
$httpProvider.defaults.headers.get = $httpProvider.defaults.headers.get || {};
$httpProvider.defaults.headers.get['DNT'] = '1';
})
ngResource
如果你的接口是RESTful類型的.ng推薦使用ngResource方式來處理.
Nuget:Install-Package AngularJS.Resource
定義resource
讓我們定義1個UserCard服務資源
.factory('UserCardResource', ['$resource', function ($resource) {
return $resource('/user/:userId/card/:cardId',
{ userId: 12, cardId: '@id' },
{ charge: { method: 'post', params: { charge: true }, isArray: false } });
}])
這里說明一下$resource方法
參數1: 必須,為資源的URL地址
參數2: 可空,為URL地址默認值
參數3: 可空,為自定義資源方法
調用resource
開始調用我們創建的資源.(一般我們會把我們的資源定義成服務,這樣其他開發也能隨時調用)
.controller('helloCtrl', ['
UserCardResource
', '$scope', function (userCard, $scope) { var data = userCard.query(); $scope.data = data; }]);
這里調用了最簡單的query方法(不需要傳參數).
但是奇怪的是,我們不是在回調函數中拿到返回值的.
實際上,在這里會先給scope.data賦值一個空的引用對象.然后在拿到數據之后,由於是引用對象,自動同步到scope上.同時頁面也會刷新.
如果我們在拿到數據后做一些操作.也可以通過回調函數方式.
userCard.query(function (data) {
//todo
});
在ngResource中默認支持的方法及對應的HttpMethod
{ get: {method: 'GET'}, save: {method: 'POST'}, query: {method: 'GET', isArray: true}, remove: {method: 'DELETE'}, delete: {method: 'DELETE'} }
再說下特殊的save方法.(ngResource中 修改和保存共用save方法)
userCard.save({ id: 1 }, card);//修改數據
userCard.save({}, card); //保存數據
當然我們也可以新建個方法update方法
.config(['resourceProvider', function ($resourceProvider) {
$resourceProvider.defaults.actions.update = {
method: 'PUT'
};
}])
(get remove delete比較簡單,不做詳細說明.)
這里再補充下isArray意義,指的是調用方法后返回的數據是數組還是單個js對象.一般query方法為數組.
本文地址:http://www.cnblogs.com/neverc/p/5920533.html