Sử dụng interception trong AngularJS

Giới thiệu về interceptor trong AngularJS

Interceptor trong Angular đc biết đến nhiều nhất là $http.Đây là service giúp ta có thể thao tác với backend và tạo ra các HTTP request.Có những trường hợp mà ta muốn nắm bắt mọi yêu cầu và vận dụng nó trước khi gửi nó đến server hoặc nắm bắt các response từ server và xử lý nó trước khi hoàn tất các cuộc gọi.Interceptor sẽ giúp t thực hiện việc này .

Giới thiệu về interceptor trong AngularJS

Các $httpProvider chứa một loạt các interceptor. Một interceptor đơn giản chỉ là một service thường xuyên được đăng ký vào mảng. Đây là cách chúng ta tạo ra một interceptor:

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;
}]);

và add interceptor vào $httpProvider.interceptors:

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

Các interceptions

• request : Method này được chạy trước khi gửi 1 request tới backend, developer có thể thay đổi các tham số config của request đó
• requestError : Đôi khi các request có thể gặp lỗi trong quá trình gửi đi, RequestError interceptor sẽ bắt các lỗi này để show ra lý do cho developer để có thể sửa .
• response : Method được chạy ngay sau khi nhận được kết quả thành công từ request method.
• responseError : Khi gặp lỗi trong quá trình nhận responce , ResponseError interceptor sẽ bắt và hiển thị các lỗi cho developer.

ví dụ cụ thể các interceptors:

$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
  return {
    // optional method
    'request': function(config) {
      // do something on success
      return config;
    },

    // optional method
   'requestError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    },

    // optional method
    'response': function(response) {
      // do something on success
      return response;
    },

    // optional method
   'responseError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    }
  };
});

$httpProvider.interceptors.push('myHttpInterceptor');

Sử lí không đồng bộ trong interceptor

• Sử lý không đồng bộ trong request interceptor

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;
        }
    };

    return requestInterceptor;
}]);

• Sử lý không đồng bộ trong responce interceptor

module.factory('myInterceptor', ['$q', 'someAsyncService', function($q, someAsyncService) {
    var responseInterceptor = {
        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 responseInterceptor;
}]);