angular中的http攔截器Interceptors的實現(xiàn)

更新時間：2017年02月21日 17:26:36 作者：lvyi

本篇文章主要介紹了angular中的http攔截器Interceptors的實現(xiàn)的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下。

在angularJs中增加了一個對全局的http請求統(tǒng)一做出處理的api--interceptors

Interceptors 有兩個處理時機，分別是：

其它程序代碼執(zhí)行 HTTP 請求之后，在實際從瀏覽器發(fā)出請求之前，即處理請求
得到請求的響應之后，在交給其它程序代碼處理之前，即處理請求的響應

其引用場景包括

全局處理錯誤
統(tǒng)一進行身份驗證一類的處理
對所有發(fā)出去的請求進行預處理
對所有收到的響應進行預處理等等

使用實例如下：

commonService.config(['$httpProvider',function($httpProvider){

    //$httpProvider.defaults.headers.common = {'X-Auth-Token': $.cookie('x_auth_token'),'Content-Type':'application/json;charset=UTF-8'};

    //添加攔截器；

    $httpProvider.interceptors.push(function ($q) {

      return {

        request: function (obj) {
               

          $('.loading').show();

          obj.headers['X-Auth-Token'] = $.cookie('x_auth_token');

          if(!obj.headers['Content-Type'])

            obj.headers['Content-Type'] = 'application/json;charset=UTF-8';

 

          var url, params,method;

       

          //加盟店請求

          mylog('jiamengdian::',sessionStorage.getItem("chainStorefrnId"));

          if(sessionStorage.getItem("chainStorefrnId")){

            //增加操作人id，name和storeid等信息

            //操作人姓名

            var operatorName = $.cookie("userType") == "employee" ? decodeURI($.cookie("username")) : decodeURI($.cookie("frnName"));

            //操作人id

            var operatorId = $.cookie("userId");

            //加盟店id

            var operatorStoreId = $.cookie("frnId");

            if (obj.method) {

              method = obj.method.toLowerCase();

            } else {

              method = "get";

            }

            //處理url，區(qū)分首次授信還是追加授信

            var flag_url = sessionStorage.getItem('chainStoreFlag');

            mylog('flag_url',flag_url);

            if(flag_url && flag_url == "firstcredit"){

 

              //提交需要加上加盟店標識

              if(obj.url.indexOf("firstcredit/createPerFirstCredit")!=-1){

                //標識個人提交

                obj.url = obj.url.replace('firstcredit/createPerFirstCredit','firstcredit/perFirstCreditByFranchisee');

              }

              else if(obj.url.indexOf("firstcredit/createBusiFirstCredit")!=-1){

                //標識企業(yè)提交

                obj.url = obj.url.replace('firstcredit/createBusiFirstCredit','firstcredit/createBusiFirstCreditByFranchisee');

              }

             
              } else {

                url = obj.url + "?creditType=1&operatorName=" + operatorName + "&operatorId=" + operatorId + "&operatorStoreId=" + operatorStoreId;

               }

            }

          return obj;

        },

        response: function (res) {

          $(".loading").hide();

          return res;

        },

        responseError: function (err) {

          $(".loading").hide();

          return $q.reject(err);

        }

      };

    });

  }]);

改api共有4個方法，分別為request ，requestError ，response ，responseError ，這個四個方法非必選，可根據(jù)需要調(diào)用，前兩個是請求的前置處理，后兩個是針對請求的響應的處理。

request ：接收一個參數(shù)，它是 $http 中的標準 config 對象，同時也需要返回一個標準 config ，此時可以添加各類身份驗證信息，同時也可在此啟動進度條
requestError ：當有多個 Interceptor 的時候， requestError 會在前一個 Interceptor 拋出錯誤或者執(zhí)行 $q.reject() 時執(zhí)行，接收的參數(shù)就對應的錯誤
response ：接受一個請求對象參數(shù)，可以不處理就直接返回，此時也可以將進度條顯示為成功完成，當然，如果后端 API 返回自定義錯誤時，HTTP 的狀態(tài)碼仍然是 200 得話，便在這里處理自定義錯誤，也可以對返回數(shù)據(jù)做一些處理，注意要將進度條置為完成
responseError ：這個是重頭戲，即可以處理標準的 Http 錯誤，如服務器沒有響應時，或者 PHP 之類的 CGI 經(jīng)常出現(xiàn)的 502 一類，還可以處理 HTTP 狀態(tài)碼不是 200 的各類自定義錯誤

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: