$http有很多參數和調用方法,本文只記錄比較常用的應用及參數。
$http 服務:只是簡單封裝了瀏覽器原生的XMLHttpRequest對象,接收一個參數,這個參數是一個對象,包含了用來生成HTTP請求的配置內容,這個函數返回一個promise對象,具有success和error方法。
$http服務的使用場景:
var promise = $http({ method:"post", // 可以是get,post,put, delete,head,jsonp;常使用的是get,post url:"./data.json", //請求路徑 params:{'name':'lisa'}, //傳遞參數,字符串map或對象,轉化成?name=lisa形式跟在請求路徑后面 data:blob, //通常在發送post請求時使用,發送二進制數據,用blob對象。 }).success(function(data){ //響應成功操作 }).error(function(data){ //響應失敗(響應以錯誤狀態返回)操作 })
then()函數:可以使用then()函數來處理$http服務的回調,then()函數接受兩個可選的函數作為參數,表示success或error狀態時的處理,也可以使用success和error回調代替:
then(successFn, errFn, notifyFn),無論promise成功還是失敗了,當結果可用之后, then都會立刻異步調用successFn或者
errFn。這個方法始終用一個參數來調用回調函數:結果,或者是拒絕的理由。
在promise被執行或者拒絕之前, notifyFn回調可能會被調用0到多次,以提供過程狀態的
提示
promise.then(function(resp){ //響應成功時調用,resp是一個響應對象 }, function(resp) { // 響應失敗時調用,resp帶有錯誤信息 });
then()函數接收的resp(響應對象)包含5個屬性:
1. data(字符串或對象):響應體
2. status:相應http的狀態碼,如200
3. headers(函數):頭信息的getter函數,可以接受一個參數,用來獲取對應名字的值
4. config(對象):生成原始請求的完整設置對象
5. statusText:相應的http狀態文本,如"ok"
或者使用success/error方法,使用
//成功處理
promise.success(function(data, status, headers, config){ // 處理成功的響應 }); // 錯誤處理 promise.error(function(data, status, headers, config){ // 處理非成功的響應 });
使用實例:
index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$http request test </title> <script src="../js/angular.js"></script> <script src="app.js"></script> </head> <body> <div data-ng-app="myApp" data-ng-controller="myAppController" data-ng-init="loadData()"> <table> <thead> <tr> <th>名稱</th> <th>屬性</th> </tr> </thead> <tbody> <tr data-ng-repeat="data in myData"> <td>{{data.name}}</td> <td>{{data.attr}}</td> </tr> </tbody> </table> </div> </body> </html>
app.js
var myHttpApp = angular.module("myApp",[]); myHttpApp.controller("myAppController",function($q,$http,$scope){ var deffer = $q.defer(); var data = new Blob([{ "name":"zhangsan" }]) $scope.loadData = function(){ var promise = $http({ method:"post", url:"./data.json", cache: true }).success(function(data){ deffer.resolve(data); }).error(function(data){ deffer.reject(data); }) promise.then(function(data){ $scope.myData = data.data; }) /*promise.success(function(data){ $scope.myData = data; })*/ } })
data.json
[ {"name":"zhangsan","attr":"China"}, {"name":"lisa","attr":"USA"}, {"name":"Bob","attr":"UK"}, {"name":"Jecy","attr":"Jepan"} ]
結果:
調用then()函數時返回的resp對象: