HTTP請求 · AngularJS學習筆記

### 11.1. HTTP請求基本的操作由 _$http_ 服務提供。它的使用很簡單，提供一些描述請求的參數，請求就出去了，然后返回一個擴充了 _success_ 方法和 _error_ 方法的 _promise_ 對象（下節介紹），你可以在這個對象中添加需要的回調函數。 var TestCtrl = function($scope, $http){ var p = $http({ method: 'GET', url: '/json' }); p.success(function(response, status, headers, config){ $scope.name = response.name; }); } _$http_ 接受的配置項有： - method 方法 - url 路徑 - params GET請求的參數 - data post請求的參數 - headers 頭 - transformRequest 請求預處理函數 - transformResponse 響應預處理函數 - cache 緩存 - timeout 超時毫秒，超時的請求會被取消 - withCredentials 跨域安全策略的一個東西其中的 _transformRequest_ 和 _transformResponse_ 及 _headers_ 已經有定義的，如果自定義則會覆蓋默認定義： 1 var $config = this.defaults = { 2 // transform incoming response data 3 transformResponse: [function(data) { 4 if (isString(data)) { 5 // strip json vulnerability protection prefix 6 data = data.replace(PROTECTION_PREFIX, ''); 7 if (JSON_START.test(data) && JSON_END.test(data)) 8 data = fromJson(data, true); 9 } 10 return data; 11 }], 1213 // transform outgoing request data 14 transformRequest: [function(d) { 15 return isObject(d) && !isFile(d) ? toJson(d) : d; 16 }], 1718 // default headers 19 headers: { 20 common: { 21 'Accept': 'application/json, text/plain, /', 22 'X-Requested-With': 'XMLHttpRequest' 23 }, 24 post: {'Content-Type': 'application/json;charset=utf-8'}, 25 put: {'Content-Type': 'application/json;charset=utf-8'} 26 } 27 }; **注意它默認的 POST 方法出去的 Content-Type** 對于幾個標準的 HTTP 方法，有對應的 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 方法，在實現上會在頁面中添加一個 `script` 標簽，然后放出一個 GET 請求。你自己定義的，匿名回調函數，會被 ng 自已給一個全局變量。在定義請求，作為 GET 參數，你可以使用 `JSON_CALLBACK` 這個字符串來暫時代替回調函數名，之后 ng 會為你替換成真正的函數名： 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 當前的請求隊列狀態 $http.defaults.transformRequest = function(data){console.log('here'); return data;} console.log($http.pendingRequests);