簡介AngularJS中$http服務的用法

我們可以使用內建的$http服務直接同外部進行通訊。 $http服務只是簡單的封裝了瀏覽器原生的XMLHttpRequest物件。接下來透過本文給大家簡單介紹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"
});

promise.then(function(resp){
//resp是一个响应对象
},function(resp){
//带有错误信息的resp
});

promise.success(function(data,status,config,headers){
//处理成功的响应
});
promise.error(function(data,status,hedaers,config){
//处理失败后的响应
});

>

由於$http方法回傳一個promise對象，我們可以在回應返回時用then方法來處理回呼。如果使用then方法，會得到一個特殊的參數，它代表了對應物件的成功或失敗訊息，也可以接受兩個可選的函數作為參數。或可以使用success和error回調來代替。

或這樣：

then()與其他兩種方法的主要方法與其他兩種方法的主要方法與其他兩種方法的主要方法與其他兩種方法的主要方法與其他兩種方法的主要方法與其他兩種方法的主要方法與其他兩種方法的主要方法與其他兩種方法的主要方法差異是，它會接收到完整的回應對象，而success()和error()則會對回應對象進行析構。

3、快速的get請求

①$http.get('/api/users.json');

get()方法傳回HttpPromise物件。

$http({
method:'GET',
url:'/api/users.json',
params:{
'username':'tan'
});

也可以發送例如：delete/head/jsonp/post/put 函數內可接受參數具體參考148頁

②以再發送jsonp請求舉例說明： 為了發送JSONP請求，其中url必須包含JSON_CALLBACK字樣。

jsonp(url,config) 其中config是可選的

var promise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");

4、也可以將$http當做函數來使用，這時需要傳入一個設定對象，用來說明如何建構XHR對象。

//参数会转为？name=ari的形式
$http({
params:{'name':'ari'}
});

其中設定物件可以包含以下主要的鍵：

①method

可以是：

①method

var blob=new Blob(['Hello world'],{type:'text/plain'});
$http({
method:'POST',
url:'/',
data:blob
});

可以是：

①method

可以是：①method< GET/DELETE/HEAD/JSONP/POST/PUT

②url:絕對的或相對的請求目標

③params(字串map或物件)

這個鍵的值是一個字串map或對象，會轉換成查詢字串追加在URL後面。如果值不是字串，會被JSON序列化。

像這個：

④data(字串或物件)

這個物件中包含了將會被當作訊息體發送給伺服器的數據。通常在發送POST請求時使用。

從AngularJS 1.3開始，它還可以在POST請求中發送二進位資料。要傳送一個blob對象，你可以簡單地透過使用data參數來傳遞它。

例如：

4、回應物件

< ）方法的回應物件包含了四個屬性。

$http({
method: 'GET',
url: '/api/users.json'
}).then (resp) {
// 读取X-Auth-ID
resp.headers('X-Auth-ID');
});

data

這個資料代表轉換後的反應體（如果定義了轉換的話）

status

status> 回應的HTTP狀態碼

headers

$http.get('/api/users.json',{ cache: true })
.success(function(data) {})
.error(function(data) {});

這個函數是頭資訊的getter函數，可以接受一個參數，用來取得對應名字值

例如，使用下列程式碼取得X-Auth-ID的值：

config

config

config

這個物件是用來產生原始請求的完整設定物件。

<p ng-app="myApp" ng-controller="customersCtrl"> 
<ul>
<li ng-repeat="x in names">
{{ x.Name + &#39;, &#39; + x.Country }}
</li>
</ul>
</p>
<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;customersCtrl&#39;, function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
.success(function(response) {$scope.names = response.records;});
});
</script>

statusText（字串）

這個字串是回應的HTTP狀態文字。 5、快取HTTP請求預設情況下，$http服務不會對請求進行本地快取。在發送單獨的請求時，我們可以透過向$http請求傳入一個布林值或一個快取實例來啟用快取。 第一次發送請求時，$http服務會向/api/users.json發送GET請求。第二次發送同一個GET請求時，$http服務會從快取中取回請求的結果，而不會真的發送HTTP GET請求。 在這個例子裡，由於設定了啟用緩存，AngularJS預設會使用$cacheFactory,這個服務是AngularJS在啟動時自動建立的。 如果想要對AngularJS所使用的快取進行更多的自訂控制，可以向請求傳入一個自訂的快取實例取代true。 下面要跟大家說下AngularJS $http知識。 AngularJS $http 是用來讀取網頁伺服器上資料的服務。 $http.get(url) 是用來讀取伺服器資料的函數。 AngularJS 實例

 更多相關教程請訪問JavaScript基礎教程