AngularJS HTTP請求

基本的操作由 $http 服務(wù)提供。它的使用很簡單，提供一些描述請求的參數(shù)，請求就出去了，然后返回一個擴充了 success 方法和 error 方法的 promise 對象（下節(jié)介紹），你可以在這個對象中添加需要的回調(diào)函數(shù)。

angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
  var p = $http({
    method: 'GET',
    url: '/json'
  });
  p.success(function(response, status, headers, config){
      $scope.name = response.name;
  });
});
angular.bootstrap(document.documentElement, ['app']);

$http 接受的配置項有：

• method 方法
• url 路徑
• params GET請求的參數(shù)
• data post請求的參數(shù)
• headers 頭
• transformRequest 請求預(yù)處理函數(shù)
• transformResponse 響應(yīng)預(yù)處理函數(shù)
• cache 緩存
• timeout 超時毫秒，超時的請求會被取消
• withCredentials 跨域安全策略的一個東西

其中的 transformRequest 和 transformResponse 及 headers 已經(jīng)有定義的，如果自定義則會覆蓋默認定義：

var $config = this.defaults = {
  // transform incoming response data
  transformResponse: [function(data) {
    if (isString(data)) {
      // strip json vulnerability protection prefix
      data = data.replace(PROTECTION_PREFIX, '');
      if (JSON_START.test(data) && JSON_END.test(data))
        data = fromJson(data, true);
    }
    return data;
  }],

  // transform outgoing request data
  transformRequest: [function(d) {
    return isObject(d) && !isFile(d) ? toJson(d) : d;
  }],

  // default headers
  headers: {
    common: {
      'Accept': 'application/json, text/plain, */*',
      'X-Requested-With': 'XMLHttpRequest'
    },
    post: {'Content-Type': 'application/json;charset=utf-8'},
    put:  {'Content-Type': 'application/json;charset=utf-8'}
  }
};

注意它默認的 POST 方法出去的 Content-Type

對于幾個標準的 HTTP 方法，有對應(yīng)的 shortcut ：

• $http.delete(url, config)
• $http.get(url, config)
• $http.head(url, config)
• $http.jsonp(url, config)
• $http.post(url, data, config)
• $http.put(url, data, config)

注意其中的 JSONP 方法，在實現(xiàn)上會在頁面中添加一個 script 標簽，然后放出一個 GET 請求。你自己定義的，匿名回調(diào)函數(shù)，會被 ng 自已給一個全局變量。在定義請求，作為 GET 參數(shù)，你可以使用 JSON_CALLBACK 這個字符串來暫時代替回調(diào)函數(shù)名，之后 ng 會為你替換成真正的函數(shù)名：

var p = $http({
  method: 'JSONP',
  url: '/json',
  params: {callback: 'JSON_CALLBACK'}
});
p.success(function(response, status, headers, config){
    console.log(response);
    $scope.name = response.name;
});

$http 有兩個屬性：

• defaults 請求的全局配置
• pendingRequests 當前的請求隊列狀態(tài)

$http.defaults.transformRequest = function(data){console.log('here'); return data;}
console.log($http.pendingRequests);