AngularJS $http用法總結

最近由於項目需要，在研究AngularJS $http的用法，查了很多資料，發現貌似沒有一篇內容可以完整的滿足我對$http的基本了解，為了下次方便自己查找，所以特意把最近查到的一些資料和自己的理解記錄下來。如果有理解不到位的地方，也歡迎路過的大神可以指點。
目錄

一.$http簡介

二.$http的基本語法

三.使用方法舉例

四.$http提供的一些快捷請求方式

五.$http.get和$http.post的用法說明

六.$http請求的同步和異步



一.$http簡介

1.$http 是 AngularJS 中的一個核心服務，用於讀取遠程服務器的數據。

2.$http服務，它是對原生XMLHttpRequest對象的簡單封裝，是只能接受一個參數的方法，  這個方法會返回一個promise對象，具有sccess和error兩個方法。當然，我們也可以在響應返回時用then方法來處理，會得到一個特殊的參數，代表了對象的成功或失敗信息，或者可以使用success和error回調代替

二.$http的基本語法

目前$http有兩種用法，第一種語法的通用格式如下：

    $http({  
         url:url,           //請求的url路徑  
         method:method,     //GET/DELETE/HEAD/JSONP/POST/PUT  
         params:params ,    //轉為  ?param1=xx1¶m2=xx2的形式  
         data: data         //包含了將被當做消息體發送給服務器的數據，通常在POST請求時使用  
     }).then(
         function success(resq){  
           //響應成功的處理方法體
         },function error(resq){  
           //響應錯誤的處理方法體  
         });  

使用then函數來處理$http的回調。其中包括兩個函數，success(resp)和error(resp).

success(resp):響應成功時調用，resp是一個響應對象；error(resp):響應失敗時調用。

參數說明：

    1.url:請求的路徑，是字符串格式
    2.method:請求的類型，如GET，POST，JSONP，DELETE,PUT等方式.最常用的是GET和POST方法，字符串。
    3.params:參數，一般是會被放入請求的URL地址后面一起提交給服務器，如果不是字符串，會被JSON格式化后發送給服務器。
    4.data:發送給服務器的參數，一般在POST請求時，用來傳遞參數用。是一個對象


其中響應參數resq包含5個參數：

    1.data:響應體，就是后台響應后返回的數據。格式為字符串或對象
    2.status:http返回的狀態碼,如200，表示服務器響應成功;  
    3.headers(函數)：頭信息的getter函數，可以接受一個參數，用來獲取對應名字的值  
    4.config(對象)：生成原始請求的完整設置對象  
    5.statusText:相應的http狀態文本，如"ok"  

該方法還有一種等價的寫法，如下所示：

    $http({  
         url:url,           //發送請求的url路徑  
         method:method,    //取值為GET/DELETE/HEAD/JSONP/POST/PUT，是字符串  
         params:params ,   //轉為  ?param1=xx1¶m2=xx2的形式  
         data: data        //包含了將被當做消息體發送給服務器的數據，通常在POST請求時使用  
    }  
    }).success(function(response, status, header, config, statusText){  
     //成功處理  
    }).error(function(data,header,config,status){  
     //錯誤處理  
    });  

那么這兩種方法有什么區別？

then方法的返回值resq相當於一個綜合體，而第二種將success,error函數單獨寫出來的方法，看它的參數就知道，其實就是講resq的參數進行析構后返回。


三.使用方法舉例

1.發送GET請求

     $http({  
           url:"/api/users.json",  
           method:'GET',  
           params:{  
                'username':'jay'
                  }  
      }).success(function (response, status, headers, config) {  
                console.log('response='+response+'status='+status+'headers'+headers+'config='+config);   //如果無法顯示，可以采用JSON.stringify(data)進行解析后查看         
         }).error(function (response) {  
      
         }  
     });  

說明：如果發送的參數是多個，則可以采用如下方式來寫：

params:{'username':'john','age':27,'phone':'1233232323'}

此處url訪問的本地文件，如果跨域訪問，可以直接使用完整的url路徑。

2.發送POST請求

    $http({
    method : 'POST',
    params : { id:123},
    data:{name:'john',age:27},
    url : "/mypath"}
    ).success(function(response, status, headers, config){  
            //do anything what you want;  
    }).error(function(response, status, headers, config){  
            //do  anything what you want;  
    });

3.帶請求頭的GET請求

     $http({  
           url:"/api/users.json",  
           method:'GET',  
           params:{'username':'jay'} ,
           headers: {'Content-Type': 'application/x-www-form-urlencoded',
                     'Authentication':'abc'}
      }).success(function (response, status, headers, config) {  
                console.log('response='+response+'status='+status+'headers'+headers+'config='+config);   //如果無法顯示，可以采用JSON.stringify(data)進行解析后查看         
         }).error(function (response) {  
      
         }  
     });  

4.帶請求頭的POST請求

    $http({
    method : 'POST',
    params : { id:123},
    headers: {'Content-Type': 'application/x-www-form-urlencoded',
              'Authentication':'abc'}
    data:{name:'john',age:27},
    url : "/mypath"}
    ).success(function(response, status, headers, config){  
            //do anything what you want;  
    }).error(function(response, status, headers, config){  
            //do  anything what you want;  
    });

四.$http提供的一些快捷請求方式

   $http提供了一些快捷方法讓我們使用，一共有六個(其實是六種請求模式)  
   1、$http.get(url，config)  返回HttpPromise對象  
   2、$http.delete(url，config)  返回HttpPromise對象  
   3、$http.head(url，config)  返回HttpPromise對象  
   4、$http.jsonp(url，config)  返回HttpPromise對象  

   5、$http.post(url，data，config) 返回HttpPromise對象

   6、$http.put(url，data，config) 返回HttpPromise對象

  說明：

   url：發送請求的url路徑，可以是絕對路徑也可以是相對路徑(同域情況下可使用相對路徑)，是字符串類型。

   config:可選的配置項，不是必須的。

   HttpPromise對象： 其實就是響應后返回的結果。我們可以通過console.log來查看它的返回值。

    $http.put('http://baidu.com',{'name':'jhon'}).then(function success(data) {
            // realData被包含在data的“data”字段中，一般它才是我們想要的
            var realData = data.data;
            console.log(realData);
        }, function error(err) {
     
        });

五.$http.get和$http.post的用法說明

1.$http.get的通用格式

     $http.get(url, [config])  
     .success(function(data){})  
     .error(function(data){});  

data的解析方式和參數同第二節中介紹過的resq.或者也可以寫成這樣：

    $http.get(url,[config]).success(function (response, status, headers, config) {  
             //響應成功處理方法
      }).error(function (response) {  
             //響應成功處理方法  
     });  

2.$http.post的通用格式

     $http.post(url,data,[config])  
      .success(function(result){  
       })  
      .error(function(result){  
       });  

或者這樣的形式：

     $http.post(url,data,[config]).success(function (response, status, headers, config) {  
         //響應成功處理方法
       }).error(function (response) {  
          //響應失敗處理方法
       });  

get方法和post方法中可選參數config說明：

其實大家可以發現$http.get方法和$http.post方法是等價的，但是在$http(config)中的一些配置參數去哪里了呢，其實就是放在了這里的config中。

config為一個JSON對象，其中主要包含該請求的url、data、method等。

如{url:"login.do",method:"post",data:{name:"12346",pwd:"123"}}。

    method  {String} 請求方式e.g. "GET"."POST"
    url {String} 請求的URL地址
    params {key,value} 請求參數，將在URL上被拼接成？key=value
    data {key,value} 數據，將被放入請求內發送至服務器
    cache {boolean} 若為true，在http GET請求時采用默認的$http cache，否則使用$cacheFactory的實例
    timeout {number} 設置超時時間

那么，在post中的url,data就對應的是config中的url和data,如果想通過這種方式設置params，cache等參數就可以放在config對象中。

返回參數說明：

     data: 返回的數據(或錯誤)
     status: 響應的狀態碼，如200表示響應成功
     headers: 一個函數
     congfig: 可查看請求的配置對象

舉個例子：

    var postData={name:'john',age:27};
    var config={params:{id:'5',name:'張三豐'},cache:{true},timeout:{1000},headers:{'Content-type':'application/json'}};
    $http.post('postData.php', postData,config)


3.舉例

$http.get方法舉例：

    $http.get("http://localhost:8080/aosapp/pt/service?formid=pt_aosapp_service_sprintlist&teamid=1")
    .success(function (response) {
          console.log(response);
    })
    .error(function (response) {
         console.log(response);
    }
    );

說明：

在get方法中，沒有單獨提供可以傳遞參數的地方，所以如果有參數，請直接在url中進行連接傳遞即可。同樣，url支持絕對路徑和相對路徑

$http.post方法舉例：

    var postData={name:'john',age:27};
    var config={
        params:{id:'5',name:'張三豐'},
        cache:{true},
        timeout:{1000},
        headers:{'Content-type':'application/json'}
    };
    $http.post('postData.php', postData,config).success(function (response) {
          console.log(response);
    })
    .error(function (response) {
         console.log(response);
    }
    );

4.$http.get和$http.post方法的對比

$http.post接收三個參數，$http.get接收兩個參數，$http.post比$http.get多了一個“請求發送的數據”，$http.get的請求參數可以放在url中進行發送，也可以在配置項config中設置params來傳遞。“

請求配置的參數”是一個嵌套的json對象必須是 {params: json對象}。

后端接收get和post參數的區別：

    “請求發送的數據”是一個json對象，在后端應該用req.body接收，一般用於接收post發送過來的參數；
     "請求配置的參數"在后端應該用req.query接收，一般用於接收get方法傳遞的參數。

5.在$http.get和在$http.post中添加請求頭

  通過在config中直接設置，設置方式前面舉例里面有設計，請參考前面第五節第2小節的舉例說明。

六.$http請求的同步和異步

$http發送請求是異步操作，但是在一些業務場景中，也需要進行同步請求。

采用Angular提供的$q可以實現同步請求。

$q采用的是promise/A規范，Promise是一種模式，以同步操作的流程形式來操作異步事件，避免了層層嵌套，可以鏈式操作異步事件。

具體的實現過程比較長，解說也比較多，在這里貼個鏈接，大家可以自行查看。

實現同步請求的方式


---------------------
版權聲明：本文為CSDN博主「心若向陽無謂悲傷」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_31490071/article/details/80704224