Angular.jsに$httpサービスを内蔵してブロッカーを追加する方法について詳しく説明します.

前言
Angularフレームワークでは、作成チームが利用者のためにAjax要求のカプセル化を行い、$httpサービスを通じて関連インタフェースを暴露した.Angularは公式ドキュメントで、$httpサービスの下位層がWebでよく見られるセキュリティ攻撃に対応していることを指摘した.つまり、$httpサービスパッケージのAjaxを使用して利用者により安全な保障を提供した.フレームワークとして、フレームワークの可用性、適合性を保証する必要があります.Angularは設計、実装においてもこのような良好なスタイルを体現しています.私たちは通常Ajaxを使用するとき、要求が開始される前に、または要求を受信した後に、対応する処理を行うことを望んでいます.例えば、要求が開始される前に、要求ヘッダにメッセージセグメントを追加する.要求が戻ったときに統一処理404の状態などの要求処理状態を管理する.Angularの$httpサービスは設計実装時に上記の状況を十分に考慮した.次に,$httpサービスにブロッキングを追加する方法を学び,理解する.そして、どのようにして私たち自身が実現したサービスの中で類似のブロックメカニズムを実現するか.
インターセプタとは?
Interceptor(ブロッカー)は、spring、Struts 2などのJavaフレームワークのような比較的一般的なメカニズムに属し、ブロッカーは基本的な構成項目に属する.ブロッカーは、開発者が1つのaction(動作)で実行する前後に実行するコードを定義できるメカニズムを提供し、これらのコードは1つのactionが実行する前に実行を阻止するコードであってもよい.ターゲットアクションのいくつかの動作を変更するコード(AOP(Aspect-oriented Programming)では、メソッドまたはフィールドがアクセスされる前にブロックし、前または後にいくつかのアクションを追加するためにブロックを使用します.Springフレームワークでは一般的です)
$httpサービスのブロッキング
APIまたはソースコードを表示すると、Angularの実装ではhttpProviderによってinterceptorsという配列が提供されています.この配列はブロッキングサービスの登録を受け、プロセスの登録によって最終的にブロッキングチェーンが形成されます.これにより、httpサービスが呼び出されるたびに、angularは定義されたブロッキングポイント(接面)を通過します.相応のAjax動作修正を行います.理論はあまり言わないで、次は実戦に入ります.
Angularでブロックを宣言する方法

// Interceptor declaration
module.factory('httpInterceptor', ['$log', function($log) {
  $log.debug('$log is here to show you that this is a regular factory with injection');

  return { 
      // do something
      };
}]);

宣言されたブロッキングを$httpサービスに登録する方法

// Add the interceptor to $httpProvider.interceptors
module.config(['$httpProvider', function($httpProvider) { 
  $httpProvider.interceptors.push('httpInterceptor');
}]);

上記の簡単な2つのステップにより、httpサービスのブロッキングの作成と追加を基本的に完了したが、上記のコードクリップは実際に使用することができず、本当にブロッキング操作を実現するには、httpサービスが暴露したブロッキング可能な点に従って関連するコードの作成を行う必要がある.
$httpProviderはブロックできる点を暴露しましたか?

request:requestメソッドは、httpがリクエストをサーバに送信する前に実行するブロックリクエストを実装することができるので、このメソッドの視線で構成を変更したり、他の操作をしたりすることができます.このメソッドは、パラメータとしてリクエスト構成オブジェクト(requestconfigurationobject)を受信し、構成オブジェクトまたはpromiseを返す必要があります.無効な構成オブジェクトまたはpromiseを返すと拒否され、http呼び出しに失敗します.

response:responseメソッドは、httpがサーバからの応答を受信した後に実行するブロック応答を実現することができるので、応答メッセージを変更したり、他の操作をしたりすることができます.この方法は、応答オブジェクト(responseobject)をパラメータとして受信し、応答オブジェクトまたはpromiseを返さなければならない.応答オブジェクトには、リクエスト構成(requestconfiguration)、ヘッダ(headers)、ステータス(status)、バックグラウンドからのデータ(data)が含まれます.無効な応答オブジェクトまたはpromiseを返すと拒否され、http呼び出しに失敗します.

requestError:requestErrorメソッドは、要求の送信に失敗したり、ブロックによって拒否されたりするブロック要求例外を実装することができます.リクエスト例外ブロッカーは、前のリクエストブロッカーによって中断されたリクエストをキャプチャします.リクエストをリカバリしたり、リクエストを取り消す前に行った構成を取り消すために使用したりすることができます.たとえば、進捗バーを閉じたり、ボタンをアクティブにしたり、入力ボックスをアクティブにしたりすることができます.

responseError:responseErrorメソッドは、ブロック応答異常を実現できます.バックグラウンド呼び出しに失敗することがあります.リクエスト・ブロッカーによって拒否されたり、前のレスポンス・ブロッカーによって中断されたりする可能性もあります.この場合、例外ブロッキングに応答すると、バックグラウンド呼び出しを復元できます.

上に露出したインタフェースの使用も異常に簡単で、簡単なサービスを宣言するように$httpサービスのブロックを宣言し、angularの注入メカニズムに渡して私たちが構成したブロックを使用することができます.

//       Angular           
module.factory('sessionInjector', ['authService', function (authService){
  return {
    request: function (config){
      if (!authService.isAnonymus) {
        config.headers['x-session-token'] = authService.token;
      }
      return config;
    }
  };
}]);

//               $httpProvider      ,       Angular        
module.config(['$httpProvider', function ($httpProvider){
  $httpProvider.interceptors.push('sessionInjector');
}]);

$httpサービスブロックの非同期サポート
一部のシーンでは、ブロック内で非同期の操作を実行したいと考えています.その後、異なる処理結果に基づいて異なるブロック操作を行うことができます.AngularJSは設計時にもこの特性をよくサポートしています.AngularJSは、ブロック方法でpromiseオブジェクトを返すことができます.httpサービスでpromiseオブジェクトを返す場合、httpサービスは、ネットワークリクエストの開始または遅延応答リクエストの結果を遅延する.

module.factory('myInterceptor', ['$q', 'someAsyncService', function($q, someAsyncService) {
  var requestInterceptor = {
    request: function(config) {
      var deferred = $q.defer();
      someAsyncService.doAsyncOperation().then(function() {
        // Asynchronous operation succeeded, modify config accordingly
        ...
        deferred.resolve(config);
      }, function() {
        // Asynchronous operation failed, modify config accordingly
        ...
        deferred.resolve(config);
      });
      return deferred.promise;
    },
    response: function(response) {
          var deferred = $q.defer();
          someAsyncService.doAsyncOperation().then(function() {
            // Asynchronous operation succeeded, modify response accordingly
            ...
            deferred.resolve(response);
          }, function() {
            // Asynchronous operation failed, modify response accordingly
            ...
            deferred.resolve(response);
          });
          return deferred.promise;
        }
  };

  return requestInterceptor;
}]);

上記の例では、リクエストの開始時に対応するdeferredが拒否するとhttpリクエストは失敗する(パケット分析を行うとhttpリクエストは開始していないことがわかる).リクエストの応答時にdeferredが拒否されるとリクエストも失敗する.
まとめ
以上はこの文章のすべての内容で、本文の内容がみんなの学习あるいは仕事に対して一定の助けをもたらすことができることを望んで、もし疑问があればみんなは伝言を残して交流することができます.