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()等等。