$http

AngularJS提供了$http服務(wù)來同服務(wù)端進(jìn)行通信，$http服務(wù)隊瀏覽器的XMLHttpRequest對象進(jìn)行了封裝，讓我們可以以ajax的方式來從服務(wù)器請求數(shù)據(jù)。

在AngularJS中與遠(yuǎn)程HTTP服務(wù)器交互時會用一個非常關(guān)鍵的服務(wù)-$http。

      1、$http是angular中的一個核心服務(wù)，利用瀏覽器的xmlhttprequest或者via JSONP對象與遠(yuǎn)程HTTP服務(wù)器進(jìn)行交互。

      2、$http的使用方式和jquery提供的$.ajax操作比較相同，均支持多種method的請求，get、post、put、delete等。

      3、$http的各種方式的請求更趨近于rest風(fēng)格。

      4、在controller中可通過與$scope同樣的方式獲取$http對象,e.g. function controller($scope,$http){}

下面進(jìn)行$http服務(wù)的使用說明，調(diào)用如下：

$http(config).success(function(data,status,headers,config){}).error(function(data,status,headers,config){});

$http服務(wù)是一個接受一個參數(shù)的函數(shù)，參數(shù)的類型是對象，用來配置生成的http的請求，該函數(shù)返回一個promise對象

var promise = $http({
 method:'GET',
 url:'/api/user.json'
});

promise.then(function(resp){}, function(resp){})

$http請求的配置對象

$http()接受的配置對象可以包含以下屬性:

     method:http請求方式，可以為GET,DELETE,HEAD,JSONP,POST,PUT

     url:字符串，請求的目標(biāo)

     params:字符串或者對象，會被轉(zhuǎn)換成為查詢字符串追加的url后面

     data:在發(fā)送post請求時使用，作為消息體發(fā)送到服務(wù)器

     headers:一個列表，每個元素都是一個函數(shù)，返回http頭

     xsrfHeaderName(字符串)：保存XSFR令牌的http頭的名稱

     xsrfCookieName:保存XSFR令牌的cookie名稱

     transformRequest:函數(shù)或者函數(shù)數(shù)組，用來對http請求的請求體和頭信息進(jìn)行轉(zhuǎn)換，并返回轉(zhuǎn)換后的結(jié)果。

     transformResponse:函數(shù)或者函數(shù)數(shù)組，用來對http響應(yīng)的響應(yīng)體和頭信息進(jìn)行轉(zhuǎn)換，并返回轉(zhuǎn)換后的結(jié)果。

     cache:布爾類型或者緩存對象，設(shè)置之后angular會緩存get請求。

     timeout:數(shù)值，延遲請求

     responseType：字符串，響應(yīng)類型?？梢詾閍rraybuffer, blob,document,json, text, moz-blob, moz-chunked-text, moz-chunked-

     arraybuffer

$http請求的響應(yīng)對象

     angular傳遞給then方法的響應(yīng)對象包括以下幾個屬性

     data:轉(zhuǎn)換之后的響應(yīng)體

     status:http響應(yīng)狀態(tài)碼

     headers:頭信息

     config:生成原始請求的設(shè)置對象

     statusText:http響應(yīng)狀態(tài)的文本

攔截器

angular中通過攔截器我們可以從全局層面對請求以及響應(yīng)進(jìn)行攔截。

使用攔截器之前，我們通過factory()聲明一個服務(wù)，然后通過$httpProvider注冊攔截器。攔截器分為四種，兩種成功攔截器，兩種失敗攔截器。

angular.module('test', []).factory('testInterceptor', function($q){
 var interceptor = {
 'request':function(config){
 return config;
 },
 'response':function(resp){
 return response;
 },
 'requestError':function(rejection){
 return $q.reject(rejection);
 },
 'responseError':function(rejection){
 return rejection
 }
 }
 return interceptor;
})

angular.module('test', []).config(function($httpProvider){
 $httpProvider.interceptors.push('testInterceptor');
})

總結(jié)

以上就是這篇文章的全部內(nèi)容，希望能對大家的學(xué)習(xí)或者工作帶來一定的幫助，如果有疑問大家可以留言交流。

最新評論