Angularjs はインターセプターを挿入して実装します。

Angularjs は完全な Ajax フレームワークであり、ページ上で操作が実行されない場合、通常の HTTP リクエストとは異なり、結果が返されるまでページからの応答はありません。 。

インターセプターとは何ですか?

$httpProvider にはインターセプター配列があり、いわゆるインターセプターは配列に登録されている通常のサービス ファクトリです。次の例は、インターセプターを作成する方法を示しています:

<!-- lang: js -->
module.factory('myInterceptor', ['$log', function($log) {
 $log.debug('$log is here to show you that this is a regular factory with injection');
 var myInterceptor = {
  ....
  ....
  ....
 };
 return myInterceptor;
}]);

次に、それを名前で $httpProvider.interceptors 配列に追加します。

<!-- lang: js -->
module.config(['$httpProvider', function($httpProvider) {
 $httpProvider.interceptors.push('myInterceptor');
}]);

まずレンダリングを見てみましょう:

この記事では、httpProvider にインターセプターを挿入することで読み込みを実装します。

HTML コード

<div class="loading-modal modal" ng-if="loading">
 <div class="loading">
  <img  src="/static/imghwm/default1.png"  data-src="<&#63;=$this- alt="Angularjs はインターセプターを挿入して実装します。" >module->getAssetsUrl()&#63;>/img/loading.gif"  class="lazy" alt=""/><span ng-bind="loading_text"></span>
 </div>
</div>

CSS コード

.modal {
 position: fixed;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 z-index: 99;
 background: rgba(0, 0, 0, 0.3);
 overflow: hidden;
}
.loading {
 position: absolute;
 top: 50%;
 background: white;
 #solution> .border-radius(8px);
 width: 160px;
 height: 72px;
 left: 50%;
 margin-top: -36px;
 margin-left: -80px;
 text-align: center;
 img {
 margin-top: 12px;
 text-align: center;
 }
 span {
 display: block;
 }
}

js コード

app.config(["$routeProvider", "$httpProvider", function ($routeProvider, $httpProvider) {
 $routeProvider.when('/', {
  templateUrl: "/views/reminder/index.html",
  controller: "IndexController"
 });
 $routeProvider.when('/create', {
  templateUrl: "/views/reminder/item/create.html",
  controller: "ItemCreateController"
 });
 $routeProvider.otherwise({redirectTo: '/'});
 $httpProvider.interceptors.push('timestampMarker');
}]);
//loading
app.factory('timestampMarker', ["$rootScope", function ($rootScope) {
 var timestampMarker = {
  request: function (config) {
   $rootScope.loading = true;
   config.requestTimestamp = new Date().getTime();
   return config;
  },
  response: function (response) {
   // $rootScope.loading = false;
   response.config.responseTimestamp = new Date().getTime();
   return response;
  }
 };
 return timestampMarker;
}]);

インターセプターにより次のことが可能になります:

リクエスト メソッドを実装してリクエストをインターセプトする: このメソッドは、$http がリクエストをバックグラウンドに送信する前に実行されるため、構成を変更したり、他の操作を実行したりできます。このメソッドはリクエスト構成オブジェクトをパラメーターとして受け取り、構成オブジェクトまたは Promise を返す必要があります。無効な構成オブジェクトまたは Promise が返された場合、それは拒否され、$http 呼び出しが失敗します。

応答メソッドを実装して応答をインターセプトする: このメソッドは、$http がバックグラウンドから応答を受信した後に実行されるため、応答を変更したり、他の操作を実行したりできます。このメソッドは応答オブジェクトをパラメータとして受け取り、応答オブジェクトまたは Promise を返す必要があります。応答オブジェクトには、要求構成、ヘッダー、ステータス、およびバックグラウンドからのデータが含まれます。無効な応答オブジェクトが返された場合、または Promise が拒否された場合、$http 呼び出しは失敗します。

requestError メソッドを実装してリクエストの例外をインターセプトする: リクエストの送信に失敗したり、インターセプターによって拒否されたりすることがあります。リクエスト例外インターセプターは、前のリクエスト インターセプターによって中断されたリクエストをキャプチャします。これは、リクエストを復元したり、場合によっては、プログレス バーを閉じたり、ボタンや入力ボックスをアクティブにしたりするなど、リクエストの前に行われた設定を元に戻すために使用できます。

responseError メソッドを実装して、応答例外をインターセプトします。バックグラウンド呼び出しが失敗する場合があります。リクエスト インターセプターによって拒否されたか、前のレスポンス インターセプターによって中断された可能性もあります。この場合、応答例外インターセプターはバックグラウンド呼び出しを再開するのに役立ちます。