這次帶給大家AngularJS中$http服務使用方法詳解,AngularJS中$http服務的注意事項有哪些,下面就是實戰案例,一起來看一下。
我們可以使用內建的$http服務直接同外部進行通訊。 $http服務只是簡單的封裝了瀏覽器原生的XMLHttpRequest物件。
1、鍊式呼叫
$http服務是只能接受一個參數的函數,這個參數是一個對象,包含了用來產生HTTP請求的設定內容。這個函數傳回一個promise對象,具有success和error兩個方法。
$http({ url:'data.json', method:'GET' }).success(function(data,header,config,status){ //响应成功 }).error(function(data,header,config,status){ //处理响应失败 });
2、回傳一個promise物件
var promise=$http({ method:'GET', url:"data.json" });
由於$http方法回傳一個promise對象,我們可以在回應回傳時用then方法來處理回調。如果使用then方法,會得到一個特殊的參數,它代表了對應物件的成功或失敗訊息,也可以接受兩個可選的函數作為參數。或可以使用success和error回調來代替。
promise.then(function(resp){ //resp是一个响应对象 },function(resp){ //带有错误信息的resp });
或這樣:
promise.success(function(data,status,config,headers){ //处理成功的响应 }); promise.error(function(data,status,hedaers,config){ //处理失败后的响应 });
then()方法與其他兩種方法的主要區別是,它會接收到完整的回應對象,而success()和error()則會對響應對象進行析構。
3、快速的get請求
①$http.get('/api/users.json');
get()方法傳回HttpPromise物件。
也可以發送例如:delete/head/jsonp/post/put 函數內可接受參數具體參考148頁
②以再發送jsonp請求舉例說明: 為了發送JSONP請求,其中url必須包含JSON_CALLBACK字樣。
jsonp(url,config) 其中config是可選的
var promise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");
#4、也可以將$http當做函數來使用,這時需要傳入一個設置對象,用來說明如何建構XHR對象。
$http({ method:'GET', url:'/api/users.json', params:{ 'username':'tan' });
其中設定物件可以包含以下主要的鍵:
①method
可以是:GET/DELETE/HEAD/JSONP/POST/PUT
②url:絕對的或相對的請求目標
③params(字串map或物件)
這個鍵的值是一個字串map或對象,會被轉換成查詢字串追加在URL後面。如果值不是字串,會被JSON序列化。
例如這個:
//参数会转为?name=ari的形式 $http({ params:{'name':'ari'} });
④data(字串或物件)
這個物件中包含了將會被當作訊息體傳送給伺服器的資料。通常在發送POST請求時使用。
從AngularJS 1.3開始,它還可以在POST請求裡發送二進位資料。要傳送一個blob對象,你可以簡單地透過使用data參數來傳遞它。
例如:
var blob=new Blob(['Hello world'],{type:'text/plain'}); $http({ method:'POST', url:'/', data:blob });
4、回應物件
AngularJS傳遞給then()方法的回應物件包含了四個屬性。
◇data:這個資料代表轉換過後的回應體(如果定義了轉換的話)
◇status:回應的HTTP狀態碼
# ◇headers:這個函數是頭資訊的getter函數,可以接受一個參數,用來取得對應名字值
例如,用以下程式碼取得X-Auth-ID的值:
$http({ method: 'GET', url: '/api/users.json' }).then (resp) { // 读取X-Auth-ID resp.headers('X-Auth-ID'); });
◇config:這個物件是用來產生原始請求的完整設定物件。
◇statusText(字串):這個字串是回應的HTTP狀態文字。
5、快取HTTP請求
預設情況下,$http服務不會對請求進行本機快取。在發送單獨的請求時,我們可以透過向$http請求傳入一個布林值或一個快取實例來啟用快取。
$http.get('/api/users.json',{ cache: true }) .success(function(data) {}) .error(function(data) {});
第一次发送请求时,$http服务会向/api/users.json发送一个GET请求。第二次发送同一个GET请求时,$http服务会从缓存中取回请求的结果,而不会真的发送一个HTTP GET请求。
在这个例子里,由于设置了启用缓存,AngularJS默认会使用$cacheFactory,这个服务是AngularJS在启动时自动创建的。
如果想要对AngularJS使用的缓存进行更多的自定义控制,可以向请求传入一个自定义的缓存实例代替true。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是AngularJS中$http服務使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!