Angularjs는 로딩 효과를 구현하기 위해 인터셉터를 삽입합니다_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="<&#63;=$this->module->getAssetsUrl()&#63;>/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를 반환해야 합니다. 잘못된 구성 개체 또는 약속이 반환되면 거부되어 $http 호출이 실패하게 됩니다.

응답 메서드를 구현하여 응답 가로채기: 이 메서드는 $http가 백그라운드에서 응답을 받은 후 실행되므로 응답을 수정하거나 다른 작업을 수행할 수 있습니다. 이 메서드는 응답 개체를 매개변수로 받고 응답 개체나 약속을 반환해야 합니다. 응답 개체에는 백그라운드의 요청 구성, 헤더, 상태 및 데이터가 포함됩니다. 잘못된 응답 객체가 반환되거나 약속이 거부되면 $http 호출이 실패합니다.

requestError 메소드를 구현하여 요청 예외를 차단합니다. 요청이 전송되지 않거나 인터셉터에 의해 거부되는 경우가 있습니다. 요청 예외 인터셉터는 이전 요청 인터셉터에 의해 중단된 요청을 캡처합니다. 요청을 복원하거나 때로는 진행률 표시줄 닫기, 버튼 및 입력 상자 활성화 등 요청 이전에 수행한 구성을 실행 취소하는 데 사용할 수 있습니다.

responseError 메소드를 구현하여 응답 예외를 차단합니다. 때때로 백그라운드 호출이 실패합니다. 요청 인터셉터에 의해 거부되었거나 이전 응답 인터셉터에 의해 중단되었을 수도 있습니다. 이 경우 응답 예외 인터셉터는 백그라운드 호출을 재개하는 데 도움이 될 수 있습니다.