1. 程式人生 > >angular中的$http服務(service)解析

angular中的$http服務(service)解析

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
     ]);
 }])

相關推薦

angular的$http服務service解析

1.1. 前述: ng中的$http用於請求後臺資料,類似於js用的ajax和jq中的$.ajax 在ng的$http中的方法有 0、$http 1

Angular學習筆記9:服務Service2

可觀察的物件(observable)的資料 在現在的是情況下:HeroService.getHeroes() 的函式簽名是同步的,它所隱含的假設是 HeroService 總是能同步獲取英雄列表資料。 而 HeroesComponent 也同樣假

記一次在廣播BroadcastReceiver服務Service裏彈窗的“完美”實踐

dac target 百度 define key 捕獲 只有一個 show 一個 事情是這樣的,目前在做一個醫療項目,需要定時在某個時間段比如午休時間和晚上讓我們的App休眠,那麽這個時候在休眠時間段如果用戶按了電源鍵點亮屏幕了,我們就需要彈出一個全屏的窗口去做一個人性化

Android廣播BroacastReceiver服務Service

com 還要 activit pro service 動態註冊 let onclick nds BroadcastReceiver可以理解成是一種組件,是默默的在改後臺運行的,用於在不同軟件和不同組件之間的傳遞,無法被用戶感知,因為他在系統的內部工作,BroadcastRe

HTTP服務

原理 主機 占用 所有 一次 用戶認證 在一起 entos 啟動服務 HTTP服務 httpd是Apache超文本傳輸協議(HTTP)服務器的主程序。被設計為一個獨立運行的後臺進程,它會建立一個處理請求的子進程或線程的池。HTTP服務的通信過程概括服務器端(s1) 服務器端

HTTP服務

訪問 shared har proxy rest scan 使用 install figure 源碼編譯安裝http-2.4 1. 安裝前準備,安裝所需要的rpm包 yum -y groupinstall "Development Tools" yum -y install

Android 服務service的生命週期以及利用bindservice呼叫服務裡面的方法

服務的生命週期 服務的生命週期跟啟動服務的方法有關:  當採用Context.startService()方法啟動服務,與之有關的生命週期方法 onCreate() onStart()  onDestroy() onCreate()該方法在服務被建立時呼叫,該方法只會被

Windows HTTP服務WinHTTP介紹

Windows HTTP服務(WinHTTP) 目的 Microsoft Windows HTTP服務(WinHTTP)為開發人員提供了HTTP客戶端應用程式程式設計介面(API),通過HTTP協議向其他HTTP伺服器傳送請求。 適用範圍 WinHTTP支援桌面客戶端應

android 系統服務service

-服務(service)是Android 系統中的重要元件,服務可以在不顯示介面的情況下在後臺執行制定的任務或者進行兩個不同程序間的通訊, android在後臺執行著許多服務,這些服務在系統啟動時被開啟,支援系統的正常工作。例如:來電顯示服務,在程式設計是通過

google protobuf 定義服務service

l  定義服務(Service) 如果想要將訊息型別用在RPC(遠端方法呼叫)系統中,可以在.proto檔案中定義一個RPC服務介面,protocol buffer編譯器將會根據所選擇的不同語言生成服務介面程式碼及存根。如,想要定義一個RPC服務並具有一個方法,該方法能

Android服務service詳解

1. 引言:在Android系統中,到處可見service(服務)這個單詞,從功能上來講,它意味著沒有UI介面,作為一個後臺程序,執行一些特定的任務。在Android應用開發過程中,也免不了需要開發一些service來完成一些功能,而這種應用層的service(繼承看自se

Android 活動Activity服務Service、程序Process的生命週期

在 Android 中,多數情況下每個程式都是在各自獨立的 Linux 程序中執行的。當一個程式或其某些部分被請求時,它的程序就“出生”了;當這個程式沒有必要再執行下去且系統需要回收這個程序的記憶體用於其他程式時,這個 程序就“死亡”了。可以看出,Android 程式的生

Pro Android學習筆記六九HTTP服務3HTTP POST MultiPart

HTTP POST不僅可以通過鍵值對傳遞引數,還可以攜帶更為複雜的引數,例如檔案。HTTP Post支援攜帶body,content-type為multipart。本次我們將嘗試通過http post上傳一個小檔案。 建立測試環境 上傳檔案的測試環境很難找,下載了Tomcat,想裝一個環境,開啟後,發現忘得

IoC之AutoFac——解析服務

動態 static 運行時 log gis 3.3 http 當前 可能 1、Resolve方法 在您的組件註冊了適當的服務後,您可以從內置的容器和子生命周期範圍中解析服務。 您可以使用Resolve()方法,還是使用上篇的例子: 1 private stati

從零開始一個http服務器-請求request解析二)

tor pen ica nice 測試 nec 代碼 acc print 從零開始一個http服務器 (二) 代碼地址 : https://github.com/flamedancer/cserver git checkout step2 解析http request 觀

視訊監控安防平臺-國標28181(GB28181)平臺通過http請求獲取HLS、RTMP和RTSP地址HTTP服務轉GB28181

        視訊監控安防平臺-國標28181(GB28181)平臺通過http請求獲取HLS、RTMP和RTSP地址(HTTP服務轉GB28181)   最近抽時間完善了HTTP服務接入GB28181的小平臺,支援HLS、RTMP、RTS

Dubbo原始碼分析:Dubbo之服務Service

         如上圖所示的Dubbo的暴露服務的過程,不難看出它也和消費者端很像,也需要一個像reference的物件來維護service關聯的所有物件及其屬性,這裡的reference就是provider。由於ServiceBean實現了  Initializ

Android Service 服務—— Service

                一、 Service簡介Service是android 系統中的四大元件之一(Activity、Service、BroadcastReceiver、ContentProvider),它跟Activity的級別差不多,但不能自己執行只能後臺執行,並且可以和其他元件進行互動。ser

Springboot224整合netty實現http服務類似SpingMvc的contoller層實現

原始碼地址 springboot2教程系列 其它netty檔案有部落格 Springboot2(24)整合netty實現http服務(類似SpingMvc的contoller層實現) Springboot2(25)整合netty實現檔案傳輸 Springb

RHEL 5服務篇—部署DNS域名解析服務BIND軟體

      DNS 系統在網路中的作用就是維護著一個地址資料庫,其中記錄了各種主機域名與IP地址的對應關係,以便為客戶程式提供正向或反向的地址查詢服務,即正向解析和反向解析。正向解析:根據域名查詢IP地址,即將指定的域名解析為相應的IP地址。反向解析:根據IP地址查詢域名,