AngularJS通過$http和伺服器通訊詳解_AngularJS

$http

AngularJS提供了$http服務來同服務端進行通訊，$http服務隊瀏覽器的XMLHttpRequest對象進行了封裝，讓我們可以以ajax的方式來從伺服器請求資料。

在AngularJS中與遠程HTTP伺服器互動時會用一個非常關鍵的服務-$http。

      1、$http是angular中的一個核心服務，利用瀏覽器的xmlhttprequest或者via JSONP對象與遠程HTTP伺服器進行互動。

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

      3、$http的各種方式的請求更趨近於rest風格。

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

下面進行$http服務的使用說明，調用如下：

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

$http服務是一個接受一個參數的函數，參數的類型是對象，用來配置產生的http的請求，該函數返回一個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:字串，請求的目標

     params:字串或者對象，會被轉換成為查詢字串追加的url後面

     data:在發送post請求時使用，作為訊息體發送到伺服器

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

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

     xsrfCookieName:儲存XSFR令牌的cookie名稱

     transformRequest:函數或者函數數組，用來對http請求的請求體和頭資訊進行轉換，並返迴轉換後的結果。

     transformResponse:函數或者函數數組，用來對http響應的響應體和頭資訊進行轉換，並返迴轉換後的結果。

     cache:布爾類型或者緩衝對象，設定之後angular會緩衝get請求。

     timeout:數值，延遲請求

     responseType：字串，響應類型。可以為arraybuffer, blob,document,json, text, moz-blob, moz-chunked-text, moz-chunked-

     arraybuffer

$http請求的響應對象

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

     data:轉換之後的響應體

     status:http響應狀態代碼

     headers:頭資訊

     config:產生原始請求的設定對象

     statusText:http響應狀態的文本

攔截器

angular中通過攔截器我們可以從全域層面對請求以及響應進行攔截。

使用攔截器之前，我們通過factory()聲明一個服務，然後通過$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');})

總結

以上就是這篇文章的全部內容，希望能對大家的學習或者工作帶來一定的協助，如果有疑問大家可以留言交流。