angular中的$http配置和參數


依賴:$httpBackend $cacheFactory $rootScope $q $injector

使用:$http(config);

參數

method:字符串,請求方法。

url:字符串,請求地址。

params:字符串或者對象,將使用paramserializer序列化並且作為GET請求的參數。

data:字符串或者對象,作為請求信息數據的數據。

headers:對象,字符串或者函數返回表示發送到服務器的HTTP請求頭。如果函數的返回值為空,則headers則不發送。函數接受一個配置對象作為參數。

xsrfHeaderName:字符串,填充XSRF令牌的HTTP請求頭名稱。

xsrfCookieName:字符串,含有XSRF令牌cookie的名字。

transformRequest:函數/函數的數組。轉換函數或者一個包含轉換函數的數組。轉換函數獲取http請求體和請求頭,並且返回他們的轉換版(通常是序列化)。

transformResponse:函數/函數的數組。轉換函數或者一個包含轉換函數的數組。轉換函數獲取http響應體和響應頭,並且返回他們的轉換版(通常是序列化)。

paramSerializer:字符串或者返回字符串的函數。用於編寫請求參數(指定為對象)的字符串表示形式的函數。如果指令是字符串,那么將被解釋為通過$injector注冊的函數,這意味着你能通過注冊服務方式創建你自己的序列化程序。默認的序列化是$httpParamSerializer;或者你可以使用$httpParamSerializerJQLike。

cache:boolean,如果為true,一個默認的$http緩存將被作為請求的緩存,否則如果存在一個用$cacheFactory創建的緩存實例,則將用於緩存。

timeout:數值,毫秒,超時則讓請求中止。

withCredentials:boolean,是否設置withcredentials flag的XHR對象。查看更多信息的憑據。

responseType:字符串,響應頭類型。

返回

data:字符串或對象。變換函數變換后的響應體。

status:數值,響應的http狀態碼。

headers:函數,響應頭的getter函數。

config:對象,用於生成請求的配置對象。

statusText:字符串,響應的HTTP狀態文本。

方法

get(url,[config]);

url:請求地址。

config:請求配置對象。

delete(url,[donfig]);

url:請求地址。

config:請求配置對象。

head(url,[config]);

url:請求地址。

config:請求配置對象。

jsonp(url,[config]);

url:請求地址。

config:請求配置對象。

post(url,data,[config]);

url:請求地址。

data:請求內容。

config:請求配置對象。

put(url,data,[config]);

url:請求地址。

data:請求內容。

config:請求配置對象。

patch(url,data,[config]);

url:請求地址。

data:請求內容。

config:請求配置對象。

屬性

pendingRequests

當前正在等待的請求的配置對象數組。主要是為了用於調試目的。

defaults  

請求頭配置默認屬性。

$httpParamSerializerJQLike

Http參數序列化程序。序列化程序也將按字母順序排序的參數。

使用代碼:

復制代碼
(function () {
    angular.module("Demo", [])
    .controller("testCtrl",["$http", "$httpParamSerializerJQLike",testCtrl]);
    function testCtrl($http, $httpParamSerializerJQLike){
      var data = { id: 1, value: "hello" };//
      $http({
          method: "post",
          data: data,//Form Data = {"id":1,"value":"hello"}
          url: "/url",
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
      }).success(function (d) { console.log(d); }).error(function(error){console.log(error);});

      $http({
          method: "post",
          data: $httpParamSerializerJQLike(data),//Form Data 變成 id:1 value:hello url: "/url",
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
      }).success(function(d){ console.log(d);}).error(function(error){ console.log(error);});
    };
}());
復制代碼

當然,這種鏈式寫法相比於jq的$ajax有更好的體驗。但是,這仍然不是終極版。

在ES6中,我們有了確定的規則——promise,回調函數。

so,我們可以:

var promise = $http({
   //..... 
});

promise.then().catch();

OK,就這樣。

最后補充一點,之前我嘗試進行代碼復用,然后發現很扯淡,$http默認是異步的,那么data就無法取出,除非你的所有數據使用方式是一樣的。

當然也可以搞個函數參數傳進去,不過我想如果不是閑的蛋疼就別了。

 

--------------------------------------------------------------------------------------2017.4.6 9:57:00-----------------------------------------------------------------

1。 angular1.6版本之后采用es6的回調寫法,使用起來更方便。

2. 關於$http post參數上傳后台接受不到的情況,需要配置config,代碼如下:

.config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.headers.post["Content-Type"] = 
                "application/x-www-form-urlencoded";
        $httpProvider.defaults.
            transformRequest.unshift(function(data,
        headersGetter) {
            var key, result = [];
                for (key in data) {
                    if (data.hasOwnProperty(key)) {
                        result.push(encodeURIComponent(key) + "="
                        + encodeURIComponent(data[key]));
                    }
                }
            return result.join("&");
        });
    }])

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM