相信大家都知道AngularJS是一個(gè)前端框架，實(shí)現(xiàn)了可交互式的頁(yè)面，但是對(duì)于一個(gè)web應(yīng)用，頁(yè)面上進(jìn)行展示的數(shù)據(jù)從哪里來(lái)，肯定需要服務(wù)端進(jìn)行支持，那么AngularJS是如何同服務(wù)端進(jìn)行交互的呢？通過(guò)這篇文章大家一起來(lái)看看吧。

$http

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

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

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

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

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

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

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

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

$http服務(wù)是一個(gè)接受一個(gè)參數(shù)的函數(shù)，參數(shù)的類型是對(duì)象，用來(lái)配置生成的http的請(qǐng)求，該函數(shù)返回一個(gè)promise對(duì)象

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

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

$http請(qǐng)求的配置對(duì)象

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

method:http請(qǐng)求方式，可以為GET,DELETE,HEAD,JSONP,POST,PUT

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

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

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

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

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

xsrfCookieName:保存XSFR令牌的cookie名稱

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

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

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

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

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

arraybuffer

$http請(qǐng)求的響應(yīng)對(duì)象

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

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

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

headers:頭信息

config:生成原始請(qǐng)求的設(shè)置對(duì)象

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

攔截器

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

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

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é)

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

您可能感興趣的文章: