天天看點

AngularJs $http 請求服務

$http

$http是Angular的一個核心服務,它有利于浏覽器通過XMLHttpRequest 對象或者 JSONP和遠端HTTP伺服器互動。

$HTTP API 是基于 $q服務暴露的deferred/promise APIs。

快捷使用方式:

$http.get

$http.head

$http.post

$http.put

$http.delete

$http.jsonp

$http.patch

設定HTTP請求頭:

$HTTP服務将會給所有請求自動建立HTTP頭。這個預設設定能完全的通過通路$httpProvider.defaults.headers配置對象配置。目前包含預設配置:

添加或覆寫這些預設值

添加或删除這些配置對象的屬性。

全局配置:

單請求配置:

重寫每個請求的預設轉換。

下面的代碼示範添加一個新的響應體轉換,在運作後的預設響應體轉換。

設定http請求緩存。

請求攔截

依賴:$httpBackend $cacheFactory $rootScope $q $injector

使用:$http(config);

參數:

method:字元串,請求方法。

url:字元串,請求位址。

params:字元串或者對象,将使用paramserializer序列化并且作為GET請求的參數。

data:字元串或者對象,作為請求資訊資料的資料。

headers:對象,字元串或者函數傳回表示發送到伺服器的HTTP請求頭。如果函數的傳回值為空,則headers則不發送。函數接受一個配置對象作為參數。

xsrfHeaderName:字元串,填充XSRF令牌的HTTP請求頭名稱。

xsrfCookieName:字元串,含有XSRF令牌cookie的名字。

transformRequest:函數/函數的數組。轉換函數或者一個包含轉換函數的數組。轉換函數擷取http請求體和請求頭,并且傳回他們的轉換後的資料(通常是序列化)。

transformResponse:函數/函數的數組。轉換函數或者一個包含轉換函數的數組。轉換函數擷取http響應體和響應頭,并且傳回他們的轉換資料(通常是序列化)。

paramSerializer:字元串或者傳回字元串的函數。用于編寫請求參數(指定為對象)的字元串表示形式的函數。如果指令是字元串,那麼将被解釋為通過$injector注冊的函數,這意味着你能通過注冊服務方式建立你自己的序列化程式。預設的序列化是$httpParamSerializer;或者你可以使用$httpParamSerializerJQLike。

cache:boolean,如果為true,一個預設的$http緩存将被作為請求的緩存,否則如果存在一個用$cacheFactory建立的緩存執行個體,則将用于緩存。

timeout:數值,毫秒,逾時則讓請求中止。

withCredentials:boolean,是否設定withcredentials flag的XHR對象。檢視更多資訊的憑據。

responseType:字元串,響應頭類型。

傳回:

data:字元串或對象。變換函數變換後的響應體。

status:數值,響應的http狀态碼。

headers:函數,響應頭的getter函數。

config:對象,用于生成請求的配置對象。

statusText:字元串,響應的HTTP狀态文本。

方法:

get(url,[config]);

url:請求位址。

config:請求配置對象。

delete(url,[donfig]);

head(url,[config]);

jsonp(url,[config]);

post(url,data,[config]);

data:請求内容。

put(url,data,[config]);

patch(url,data,[config]);

屬性:

pendingRequests

目前正在等待的請求的配置對象數組。主要是為了用于調試目的。

defaults  

請求頭配置預設屬性。

$httpParamSerializerJQLike

Http參數序列化程式。序列化程式也将按字母順序排序的參數。

使用代碼:

請求除了$http,還有$resource,關于後者,後面再提,先說明下$http,在最後例子的2個$http請求的時候,還加了headers設定"Content-Type": "application/x-www-form-urlencoded",這是因為有些小夥伴提出請求沒有Form Data,隻有 Request Payload,那麼當我們設定請求頭的Content-Type值為application/x-www-form-urlencoded時,就能看見Form Data了。實測可行...