ホームページ > 記事 > ウェブフロントエンド > 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="<?=$this->module->getAssetsUrl()?>/img/loading.gif" 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 メソッドを実装して、応答例外をインターセプトします。バックグラウンド呼び出しが失敗する場合があります。リクエスト インターセプターによって拒否されたか、前のレスポンス インターセプターによって中断された可能性もあります。この場合、応答例外インターセプターはバックグラウンド呼び出しを再開するのに役立ちます。