angular $http服務

$http服務

angular內置的$http服務簡單的封裝了瀏覽器原生的XMLHttpRequest對象，能夠直接同外部進行通訊。

$http服務只能接受一個參數，且該參數是一個對象，這個對象主要包含一些http請求的配置內容。如：

var req = {
    method: 'POST',
    url: 'http://example.com',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: { test: 'test' }
}

$http(req).success(function(data,header,config,status){
    //響應成功
    
}).error(function(data,header,config,status){
    //處理響應失敗
});

能夠看到$http()方法返回的是一個promise對象，咱們也能夠在響應返回時用then回調。可是用then回調會獲得一個特殊的參數，表明了相應對象的成功或失敗信息，還能夠接受兩個可選的函數做爲參數。如：

$http(req).then(function(resp){
    //resp是一個響應對象

},function(resp){
    //帶有錯誤信息的resp

});

then()方法回調和success(),error()回調的區別是，then()會接收到完整的對象，而success()和error()會對響應進行解構。

 

ng中的$http方法

$http 
$http.get 
$http.head 
$http.post 
$http.put 
$http.delete 
$http.jsonp 
$http.patch

$http()的用法 
一些參數和說明

參數	說明
method	請求方法
url	請求地址
params	字符串或者對象，將使用paramserializer序列化而且做爲GET請求的參數。
data	字符串或者對象，做爲請求信息數據的數據。
headers	對象，字符串或者函數返回表示發送到服務器的HTTP請求頭。若是函數的返回值爲空，則headers則不發送。
xsrfHeaderName	填充XSRF令牌的HTTP請求頭名稱
xsrfCookieName	含有XSRF令牌cookie的名字
transformRequest	函數/函數的數組。轉換函數或者一個包含轉換函數的數組。轉換函數獲取http請求體和請求頭，而且返回他們的轉換後的數據（一般是序列化）。
transformResponse	函數/函數的數組。轉換函數或者一個包含轉換函數的數組。轉換函數獲取http響應體和響應頭，而且返回他們的轉換數據（一般是序列化）。
paramSerializer	字符串或者返回字符串的函數。用於編寫請求參數（指定爲對象）的字符串表示形式的函數。若是指令是字符串，那麼將被解釋爲經過$injector註冊的函數，這意味着你能經過註冊服務方式建立你本身的序列化程序。默認的序列化是$httpParamSerializer；或者你可使用$httpParamSerializerJQLike。
cache	若是爲true，一個默認的緩存將被做爲請求的緩存，不然若是存在一個用cacheFactory建立的緩存實例，則將用於緩存。
timeout	數值，毫秒，超時則讓請求停止。
withCredentials	boolean，是否設置withcredentials flag的XHR對象。查看更多信息的憑據。
responseType	響應頭類型

 

返回的參數：

參數	說明
data	字符串或對象。變換函數變換後的響應體。
status	響應的http狀態碼。
headers	函數，響應頭的getter函數。
config	對象，用於生成請求的配置對象。
statusText	字符串，響應的HTTP狀態文本。

 

 

$http.get(url,[config])    $http.delete(url,[donfig])     $http.head(url,[config])    $http.jsonp(url,[config]) 

這四個方法中的參數： 
url：請求地址。 
config：請求配置對象。

 

$http.post(url,data,[config])     $http.put(url,data,[config])     $http.patch(url,data,[config]) 

這三個方法多上面四個多了一個參數data，表示請求內容。 
以上就是$http服務的內容。

 

$http的測試

angular的$http服務比較簡單，這裏再介紹一下$http服務的測試。 
舉一個簡單的例子：

var app = angular.module('Application', []);

app.controller('MainCtrl', function($scope, $http) {
    $http.get('Users/users.json').success(function(data){
        $scope.users = data;
    });
    $scope.text = 'Hello World!';
});

咱們主要用angular自帶的$httpBackend設置僞後臺，試的時候，咱們不須要真實的發送HTTP請求來獲取數據。若是能夠只測試Service的邏輯，當發送請求時，咱們將這個請求攔截下來，而後返回一個預約義好的數據便可。

describe('MainCtrl', function() {
    //咱們會在測試中使用這個scope
    var scope, $httpBackend;

    //模擬咱們的Application模塊並注入咱們本身的依賴
    beforeEach(angular.mock.module('Application'));

    //模擬Controller，而且包含 $rootScope 和 $controller
    beforeEach(angular.mock.inject(function($rootScope, $controller, _$httpBackend_) {
        //設置$httpBackend沖刷$http請求
        $httpBackend = _$httpBackend_;
        $httpBackend.when('GET', 'Users/users.json').respond([{
            id: 1,
            name: 'Bob'
        }, {
            id: 2,
            name: 'Jane'
        }]);
        //建立一個空的 scope
        scope = $rootScope.$new();

        //聲明 Controller而且注入已建立的空的 scope
        $controller('MainCtrl', {
            $scope: scope
        });
    }));

    // 測試從這裏開始
    it('should have variable text = "Hello World!"', function() {
        expect(scope.text).toBe('Hello World!');
    });
    it('should fetch list of users', function() {
        $httpBackend.flush();
        expect(scope.users.length).toBe(2);
        expect(scope.users[0].name).toBe('Bob');
        //輸出結果以方便查看
        for(var i=0;i<scope.users.length;i++){
            console.log(scope.users[i].name);
        }
    });
});

$httpBackend的經常使用方法：

方法	說明
when(method, url, [data], [headers])	測試$http()
whenGET(url, [headers]);	測試$http.get()

同理，還有whenHead(),whenDelete()等等。