angular通過$http與服務器通信

http://www.cooklife.cn/detail/54c5044ec93620284e964b58#View

angular是一個前端框架，實現了可交互式的頁面，但是對於一個web應用，頁面上進行展示的數據從哪裏來，肯定需要服務端進行支持，那麼angular是如何同服務端進行交互的呢？

$http

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

$http服務是一個接受一個參數的函數，參數的類型是對象，用來配置生成的http的請求，該函數返回一個promise對象（關於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');
})