angular中的$http服務（service）解析

ITzhongzi發表於2017-04-02
AngularHTTP


1.1. 前述：

ng中的$http用於請求後臺資料，類似於js用的ajax和jq中的$.ajax
在ng的$http中的方法有
            0、$http
            1、$http.get
            2、$http.head
            3、$http.post
            4、$http.put
            5、$http.delete
            6、$http.jsonp
            7、$http.patch
 用法大相徑庭，本文選取幾個典型的進行解析。

1.2. $http

基本語法:
     $http({
         url: ...
         mathod: ...
      })
     在ng中$http方法返回的是一個promise物件。它有一個success方法和一個error方法。
        1>在 ng 1.5.8版本中：
            $http({
                url: ...
                mathod: ...
            }).success(function(data){})  //請求成功時呼叫
              .error(function(data){})    //請求失敗時呼叫


        2>在 ng 1.6.0以上的版本中：
             $http({
                  url: ...
                  mathod: ...
              }).then(success,error)
         其中success和error分別是請求成功和請求失敗時的回撥函式

1.2.1. 示例demo：

   var req = {
    method: 'POST',
    url: 'http://example.com',
    headers: {
      'Content-Type': undefined
    },
    data: { test: 'test' }
   }

   $http(req).then(function(){...}, function(){...});

1.3. $http.get()/post() 用法參照$http(基本相同)

   基本語法：以get為例

       $http.get(url).then(success,error);
        傳入一個url請求的地址，返回一個promise物件，給物件有一個then方法。
         then方法的第一個引數是請求成功時的回撥函式，第二個引數時請求失敗時的回撥函式

1.3.1. 示例demo：

 $http.get( url )
       .then( function ( info ) {
           console.log( info.data );
           $scope.restaurants = info.data;
       });

1.4. $http.jsonp() 用法參照$http(基本相同)

   基本語法：
        語法: $http.jsonp( url ).then( ... )
        注意: url 應該帶有 callback 引數, 並且引數的值為 JSON_CALLBACK

1.4.1. 示例程式碼：

  $http.jsonp( 'http://jklib.org/ele/citiesjsonp.ashx?callback=JSON_CALLBACK' )
        .success( function ( data ) {
            console.log( data );
        } );

1.5. jsonp跨域的原理解析（本質）

  • 在‘全域性’範圍內有一個函式
  • script標籤可以下載js檔案（字串）
  • script可以執行下載的指令碼

1.5.1. 跨域原理示例demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var common = {};

        common.func = function ( v ) {
            console.log( v );
        };
    </script>
    <script src="http://127.0.0.1/jsonptest.js"></script>
</head>
<body>

</body>
</html>

jsonptest.js 檔案 // function func () { // alert( 1 ); // } common.func( { name: '123', age: 123, gender: '123' } );

1.5.1.1.1. 注意：
在  ng 1.6 的版本中需要注意, 請求的路徑要配置白名單，例如：

 .config(['$sceDelegateProvider', function($sceDelegateProvider) {
     $sceDelegateProvider.resourceUrlWhitelist([
         '**'
         // 在 node 平臺下引入了 全域性萬用字元
         // 使用 * 表示一個目錄下任意的檔案或資料夾
         // 使用 ** 表示任意目錄結構下多個資料夾結構
         //      /index/index/index.html
         //      /*/*/*.html
         //      /**/*.html
     ]);
 }])

相關文章