簡介AngularJS中$http服務的用法
我們可以使用內置的$http服務直接同外部進行通信。$http服務只是簡單的封裝了瀏覽器原生的XMLHttpRequest對象。
1、鏈式調用
$http服務是只能接受一個參數的函數,這個參數是一個對象,包含了用來生成HTTP請求的配置內容。這個函數返回一個promise對象,具有success和error兩個方法。
$http({ url:'data.json', method:'GET' }).success(function(data,header,config,status){ //響應成功 }).error(function(data,header,config,status){ //處理響應失敗 });
2、返回一個promise對象
var promise=$http({ method:'GET', url:"data.json" });
由于$http方法返回一個promise對象,我們可以在響應返回時用then方法來處理回調。如果使用then方法,會得到一個特殊的參數,它代表了相應對象的成功或失敗信息,還可以接受兩個可選的函數作為參數。或者可以使用success和error回調代替。
promise.then(function(resp){ //resp是一個響應對象 },function(resp){ //帶有錯誤信息的resp });
或者這樣:
promise.success(function(data,status,config,headers){ //處理成功的響應 }); promise.error(function(data,status,hedaers,config){ //處理失敗后的響應 });
then()方法與其他兩種方法的主要區(qū)別是,它會接收到完整的響應對象,而success()和error()則會對響應對象進行析構。
3、快捷的get請求
①$http.get('/api/users.json');
get()方法返回HttpPromise對象。
還可以發(fā)送比如:delete/head/jsonp/post/put 函數內可接受參數具體參照148頁
②以再發(fā)送jsonp請求舉例說明: 為了發(fā)送JSONP請求,其中url必須包含JSON_CALLBACK字樣。
jsonp(url,config) 其中config是可選的
var promise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");
4、也可以將$http當做函數來使用,這時需要傳入一個設置對象,用來說明如何構造XHR對象。
$http({ method:'GET', url:'/api/users.json', params:{ 'username':'tan' });
其中設置對象可以包含以下主要的鍵:
①method
可以是:GET/DELETE/HEAD/JSONP/POST/PUT
②url:絕對的或者相對的請求目標
③params(字符串map或者對象)
這個鍵的值是一個字符串map或對象,會被轉換成查詢字符串追加在URL后面。如果值不是字符串,會被JSON序列化。
比如這個:
//參數會轉為?name=ari的形式 $http({ params:{'name':'ari'} });
④data(字符串或者對象)
這個對象中包含了將會被當作消息體發(fā)送給服務器的數據。通常在發(fā)送POST請求時使用。
從AngularJS 1.3開始,它還可以在POST請求里發(fā)送二進制數據。要發(fā)送一個blob對象,你可以簡單地通過使用data參數來傳遞它。
例如:
var blob=new Blob(['Hello world'],{type:'text/plain'}); $http({ method:'POST', url:'/', data:blob });
4、響應對象
AngularJS傳遞給then()方法的響應對象包含了四個屬性。
data
這個數據代表轉換過后的響應體(如果定義了轉換的話)
status
響應的HTTP狀態(tài)碼
headers
這個函數是頭信息的getter函數,可以接受一個參數,用來獲取對應名字值
例如,用如下代碼獲取X-Auth-ID的值:
$http({ method: 'GET', url: '/api/users.json' }).then (resp) { // 讀取X-Auth-ID resp.headers('X-Auth-ID'); });
config
這個對象是用來生成原始請求的完整設置對象。
statusText(字符串)
這個字符串是響應的HTTP狀態(tài)文本。
5、緩存HTTP請求
默認情況下,$http服務不會對請求進行本地緩存。在發(fā)送單獨的請求時,我們可以通過向$http請求傳入一個布爾值或者一個緩存實例來啟用緩存。
$http.get('/api/users.json',{ cache: true }) .success(function(data) {}) .error(function(data) {});
第一次發(fā)送請求時,$http服務會向/api/users.json發(fā)送一個GET請求。第二次發(fā)送同一個GET請求時,$http服務會從緩存中取回請求的結果,而不會真的發(fā)送一個HTTP GET請求。
在這個例子里,由于設置了啟用緩存,AngularJS默認會使用$cacheFactory,這個服務是AngularJS在啟動時自動創(chuàng)建的。
如果想要對AngularJS使用的緩存進行更多的自定義控制,可以向請求傳入一個自定義的緩存實例代替true。
下面給大家說下AngularJS $http知識。
AngularJS $http 是一個用于讀取web服務器上數據的服務。
$http.get(url) 是用于讀取服務器數據的函數。
AngularJS 實例
<div ng-app="myApp" ng-controller="customersCtrl"> <ul> <li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php") .success(function(response) {$scope.names = response.records;}); }); </script>
相關文章
AngularJS中監(jiān)視Scope變量以及外部調用Scope方法
在AngularJS中,有時候需要監(jiān)視Scope中的某個變量,因為變量的改變會影響一些界面元素的顯示,接下來通過本文給大家介紹AngularJS中監(jiān)視Scope變量以及外部調用Scope方法,需要的朋友參考下吧2016-01-01