Angularjs學習筆記（四）----與後端服務器通訊

時間 2019-12-02

標籤 angularjs 學習筆記後端服務器通訊欄目 AngularJS 简体版

原文原文鏈接

1、使用$http進行XHR和JSONP請求javascript

　　1.1 XHR請求php

GET:$http.get(url,config)
POST:$http.post(url,data,config)
PUT:$http.put(url,data,config)
DELETE:$http.delete(url,config)
HEAD:$http.head

　　1.2 JSONP請求html

　　$http.jsonp(url,config)java

　　1.3 方法參數說明angularjs

url：調用目標URL
data：請求體中送出的數據
config：包含額外配置信息的JavaScript配置對象，對請求和響應都有影響

　　1.4 config說明web

　　Javascript配置對象保存着不少可選項，以影響請求、相應及傳送的數據。配置對象中較重要的屬性以下：json

method:所用的HTTP方法
url：請求的目標URL
params：URL的參數
headers：額外的請求頭
timeout：XHR請求終止前的超時時間（單位是毫秒）
cache：XHR GET請求的緩存開關
transformRequest、transpormResponse:在與後端交換數據前或交換後，對數據進行處理的數據變換函數

　　1.5 轉換請求數據和相應數據後端

　　$http.post和$http.put方法接受任何JavaScript對象（或字符串）值做爲他們的data參數。若是data是JavaScript對象，則data會默認轉換爲JSON字符串。跨域

　　和轉換請求數據同樣，$http服務會試圖將響應中包含的JSON字符串轉換爲JavaScript對象，這種轉換髮生在成功或失敗回調以前，默認的轉換行爲是能夠定製的。數組

　　1.6 處理HTTP響應

　　請求可能成功或者失敗，AngularJS提供兩種方法以註冊對應這兩種結果的回調；success和error。他們都接受callback函數，此函數會調用以下參數：

data：實際的響應數據
status：響應的HTTP狀態
headers：訪問HTTP響應頭信息的函數
config：請求觸發時提供的配置對象

2、處理同源政策約束

　　web瀏覽器強行實行同源安全政策，此政策僅對目標資源來自同源（協議、主機和端口的結合）的XHR互動受權，並對外部資源的互動加以限制。

　　下面介紹三種方式來訪問外部服務器的數據：

　　2.1 JSONP

　　利用JSONP，能夠超越同源政策約束來獲取數據。它的實現，有賴於瀏覽器可以自由地經過<script>標籤從外部服務器獲取JavaScript。

　　JSONP調用不觸發XHR請求，取而代之的是生成一個<script>標籤，其源指向外部資源。

　　使用方法：

$http
    .jsonp('http://angularjs.org/greet.php?callback=JSON_CALLBACK',{
        params:{
            name:'World'
        }
    }).success(function(data){
        $scopt.greeting=data;
    });

　　JSONP的限制。首先，只能用JSONP技術提交GET HTTP請求；其次，錯誤處理也至關麻煩，由於瀏覽器不會經過<script>標籤暴露HTTP響應狀態。在實踐中，這意味着難以報告HTTP狀態錯誤，並調用錯誤回調。

　　JSONP也給web應用帶來了一些潛在安全問題。例如衆所周知的XSS攻擊，因此，應認真選擇JSONP請求的目標服務，只是用可信任的服務器。

　　2.2 CORS

　　CORS(cross-origin resource sharing)是一包W3C標準，致力於標準、可靠、安全地解決上述JSONP所面對的問題。CORS標準基於XMLHttpRequest對象，採用清晰可控的方式進行跨域AJAX請求。

　　CORS的指導思想是瀏覽器和外界服務器須要協同（經過發送適當的請求和響應頭）進行有條件的跨域請求。外界服務器須要依次配置，瀏覽器則必須發送恰當的請求和請求頭，並翻譯服務器響應以成功完成跨域請求。

　　缺點：①須要配置。②$http服務在IE8和IE9下不支持CORS請求。

　　2.3 服務器端代理

　　JSONP並非進行跨域請求的理想技術。CORS標準雖好，但它依然須要服務器端的額外配置，以及支持此標準的瀏覽器。

　　若是你不能用CORS和JSONP技術，還有一種避免跨域請求的方法，那就是爲外界服務器配置本地服務器作代理。應用正確的服務器配置，能夠經過本身的服務器代理跨域請求，這樣瀏覽器只會將服務器做爲目標。這種技術在全部的瀏覽器上都有效，也不須要實現用OPTIONS請求試探。並且，咱們不用冒任何安全風險。這種方法的惟一缺點就是，咱們依舊須要對服務器進行配置。

3、promise API與$q　

　　3.1 promise

　　在異步的世界裏，咱們不能簡單地連接函數調用，而要依靠回調，回調在僅處理一個異步事件時工做的很好，但一旦要協調多個異步事件時，事情就開始變得複雜了，這時特別難的是異步情況處理。

　　可是有了Promise這種規範，它能幫助開發者用同步的方式，編寫異步的代碼，好比在AngularJS中可使用這種方式：

deferABC.resolve(xxx)
.then(funcSuccess(){},funcError(){},funcNotify(){});

　　當resolve內的對象成功執行，就會觸發funcSuccess，若是失敗就會觸發funcError。

　　再說的直白點，Promise就是一種對執行結果不肯定的一種預先定義，若是成功，就xxxx；若是失敗，就xxxx，就像事先給出了一些承諾。

　　3.2 $q

　　3.2.1 定義

　　$q服務是AngularJS中本身封裝實現的一種Promise實現。

　　3.2.2 狀態

　　在Promise中，定義了三種狀態：等待狀態，完成狀態，拒絕狀態。

　　關於狀態有幾個規定：

1 狀態的變動是不可逆的
2 等待狀態能夠變成完成或者拒絕

　　3.2.3 $q經常使用的幾個方法

defer() 建立一個deferred對象，這個對象能夠執行幾個經常使用的方法，好比resolve,reject,notify等
all() 傳入Promise的數組，批量執行，返回一個promise對象
when() 傳入一個不肯定的參數，若是符合Promise標準，就返回一個promise對象。

　　3.2.4 defer()方法

　　在$q中，可使用resolve方法，變成完成狀態；使用reject方法，變成拒絕狀態。

<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
    <div ng-controller="myctrl">
        {{test}}
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",[]);
         myAppModule.controller("myctrl",["$scope","$q",function($scope, $ q ){
            $scope.test = 1;//這個只是用來測試angularjs是否正常的，沒其餘的做用

            var defer1 = $q.defer();
            var promise1 = defer1.promise;

            promise1
            .then(function(value){
                console.log("in promise1 ---- success");
                console.log(value);
            },function(value){
                console.log("in promise1 ---- error");
                console.log(value);
            },function(value){
                console.log("in promise1 ---- notify");
                console.log(value);
            })
            .catch(function(e){
                console.log("in promise1 ---- catch");
                console.log(e);
            })
            .finally(function(value){
                console.log('in promise1 ---- finally');
                console.log(value);
            });

            defer1.resolve("hello");
            // defer1.reject("sorry,reject");
         }]);
    </script>
</body>
</html>

　　其中defer()用於建立一個deferred對象，defer.promise用於返回一個promise對象，來定義then方法。then中有三個參數，分別是成功回調、失敗回調、狀態變動回調。

　　其中resolve中傳入的變量或者函數返回結果，會看成第一個then方法的參數。then方法會返回一個promise對象，所以能夠寫成

xxxx
.then(a,b,c)
.then(a,b,c)
.then(a,b,c)
.catch()
.finally()

　　繼續說說上面那段代碼，then...catch...finally能夠想一想成java裏面的try...catch...finally。

　　3.2.5 all()方法

　　這個all()方法，能夠把多個primise的數組合併成一個。當全部的promise執行成功後，會執行後面的回調。回調中的參數，是每一個promise執行的結果。
　　當批量的執行某些方法時，就可使用這個方法。

var funcA = function(){
                console.log("funcA");
                return "hello,funA";
            }
            var funcB = function(){
                console.log("funcB");
                return "hello,funB";
            }
            $q.all([funcA(),funcB()])
            .then(function(result){
                console.log(result);
            });

　　執行的結果

funcA
funcB
Array [ "hello,funA", "hello,funB" ]

　　3.2.6 when()方法

　　when方法中能夠傳入一個參數，這個參數多是一個值，多是一個符合promise標準的外部對象。

var funcA = function(){
                console.log("funcA");
                return "hello,funA";
            }
            $q.when(funcA())
            .then(function(result){
                console.log(result);
            });

　　執行的結果