angular之interceptors攔截器

来源:http://www.cnblogs.com/puyongsong/archive/2017/05/14/6636462.html
-Advertisement-
Play Games

interceptors click me ...


<!DOCTYPE html>
<html ng-app="nickApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>interceptors</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        /*
         $http service在Angular中用於簡化與後臺的交互過程,其本質上使用XMLHttpRequest或JSONP進行與後臺的數據交互。
         在與後臺的交互過程中,可能會對每條請求發送到Server之前進行預處理(如加入token),或者是在Server返回數據到達客戶端還未被處理之前進行預處理(如將非JSON格式數據進行轉換);
         當然還有可能對在請求和響應過程過發生的問題進行捕獲處理。所以Angular為我們提供了$http攔截器,用來實現上述需求。*/
        /*
         $httpProvider中有一個 interceptors 數組,而所謂攔截器只是一個簡單的註冊到該數組中的常規服務工廠。
         1 首先 創建一個攔截器服務工廠
         */
        angular.module('nickApp', [])
                .factory('NickInterceptor', ['$q', function ($q) {
                    return {
                        // 可選,攔截成功的請求
                        /*
                         該方法會在$http發送請求到後臺之前執行,因此你可以修改配置或做其他的操作。
                         該方法接收請求配置對象(request configuration object)作為參數,然後必須返回配置對象或者promise 。
                         如果返回無效的配置對象或者 promise 則會被拒絕,導致$http 調用失敗
                         */
                        request: function (config) {
                            // 進行預處理
                            // 例如加令牌
                            config.headers['Authorization'] = 'token666';
                            /*
                             Request Headers
                             token:token666 //加的令牌
                             */
                            return config || $q.when(config);
                        },

                        // 可選,攔截成功的響應
                        /*
                         該方法會在$http接收到從後臺過來的響應之後執行,因此你可以修改響應或做其他操作。
                         該方法接收響應對象(response object)作為參數,
                         然後必須返迴響應對象或者promise。響應對象包括了請求配置(request configuration),頭(headers),狀態(status)和從後臺過來的數據(data)。
                         如果返回無效的響應對象或者 promise 會被拒絕,導致$http調用失敗。
                         */
                        response: function (response) {
                            // 進行預處理
                            // 例如 JSON.parse(response)等
                            return response || $q.when(reponse);
                        },

                        // 可選,攔截失敗的請求
                        /*
                         有時一個請求發送失敗或者被攔截器拒絕了。requestError攔截器會捕獲那些被上一個請求攔截器中斷的請求。
                         它可以用來恢復請求或者有時可以用來撤銷請求之前所做的配置,比如關閉遮罩層,顯示進度條,激活按鈕和輸入框之類的。
                         */
                        requestError: function (rejection) {
                            // 對失敗的請求進行處理
                            // 例如 統一的彈窗提示

                            return $q.reject(rejection);
                        },

                        // 可選,攔截失敗的響應
                        /*
                         有時候我們後臺調用失敗了。也有可能它被一個請求攔截器拒絕了,或者被上一個響應攔截器中斷了。
                         在這種情況下,響應異常攔截器可以幫助我們恢復後臺調用。
                         */
                        responseError: function (rejection) {
                            // 對失敗的響應進行處理
                            // 例如 統一的彈窗提示

                            return $q.reject(rejection);
                        }
                    };
                }])
                /*
                 $httpProvider中有一個 interceptors 數組,而所謂攔截器只是一個簡單的註冊到該數組中的常規服務工廠。
                 2 在config方法中,將攔截器加入到$httpProvider.interceptors數組中
                 */
                .config(['$httpProvider', function ($httpProvider) {
                    $httpProvider.interceptors.push('NickInterceptor');
                }])
                .controller('bodyCtl', ['$scope', '$http', function ($scope, $http) {
                    $scope.test1 = function () {
                        console.log(11);
                        $http.get('interceptors.html');
                    };
                }])

    </script>
</head>
<body ng-controller="bodyCtl">
<button class="btn" ng-click="test1()">click me</button>
<div ng-view></div>
</body>
</html>

  

 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 類與對象是不同的,類是對象的藍本,你創建出來的是對象,而它的結構由類預先定義。對象是一些操作(方法)和信息(屬性)的集合,並占據記憶體中的一塊存儲空間,你可以通過函數調用的方式讓它對它的屬性執行默寫操作。 摘自 [美】 Alasdair Allan <Learning iOS Programming> ...
  • 本篇博客是《JWebFileTrans(JDownload):一款可以從網路上下載文件的小程式》系列博客的第三篇,本篇博客的內容主要是在前兩篇的基礎上增加多線程的功能。簡言之,本篇博客截止目前所達到的功能是:基於HTTP協議的多線程斷點遠程下載小程式 ...
  • 1.所有的標記都必須要有一個相應的結束標記 以前在HTML中,你可以打開許多標簽,例如<p>和<li>而不一定寫對應的</p>和</li>來關閉它們。但在XHTML中這是不合法的。XHTML要求有嚴謹的結構,所有標簽必須關閉。如果是單獨不成對的標簽,在標簽最後加一個"/"來關閉它。 2.所有標簽的元 ...
  • 示例html代碼: 獲得id為test的DOM對象,下麵就不一一獲取了。 test.innerHTML 描述:也就是從對象的起始位置到終止位置的全部內容,包括Html標簽。 上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> te ...
  • 一、安裝node.js 方式很多npm,git等,新手建議從官網上直接去下載node的安裝包。一鍵安裝. 二、創建一個web伺服器。 三、讀取文件的方式(同步,非同步) 1.同步 2.非同步 三、事件迴圈 四、數據緩衝區 1.向緩存區寫入數據 2.讀取緩衝區的內容 3.Buffer 轉為JSON對象 4 ...
  • 3.下拉列表:<select name="" id=""> <option value=""></option> </select> 屬性:name="" 指定獲取輸入的名字。 value="" 不知道有什麼用。但我知道它有用。 在option標簽中預設選中屬性為 selected 在input標簽 ...
  • 【JavaScriptOPP基礎】【成員屬性與成員方法】【原型與原型鏈】【原型屬性與原型方法】【for-in迴圈】【JS OOP 中的繼承】【JS模式實現繼承的三種方式】【閉包】 ...
  • Position 屬性:規定元素的定位類型。即元素脫離文檔流的佈局,在頁面的任意位置顯示。 ①absolute :絕對定位;脫離文檔流的佈局,遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素(postion不為static),否則為Body文檔本身。 ②relative :相對定位;不脫 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...