restangular: возможно ли иметь индикатор выполнения?

Question

У меня есть этот код (в службе) на основе restangular (он работает):

sendFile: function (params) { 
       console.log('sendFile'); 
       console.log(params); 
       return this.restfulBase().post('file.json',params,{},{ 'X-CSRF-Token' : ipCookie('csrftoken')}); 
      } 

Как я могу, на мой контроллер/директивы, получить ход этой загрузки только с использованием Restangular? Я прочитал, что могу написать свою функцию загрузки, которая напрямую использует XHR или плагин jQuery, например FileUpload, но я хочу использовать только restangular, чтобы мой пользователь не загружал бесполезные js-файлы.

Или есть возможность перехвата при загрузке? Таким образом, я могу написать div «Loading ...» (хорошо, это не хорошо, как индикатор выполнения, лучше, чем ничего).

Спасибо.

Answer 1

Вы можете сделать это с помощью HTTP-перехватчиков. Это будет всего несколько строк кода в вашем приложении, которое хорошо работает с Restangular. Используя это, вы можете определить, когда начат запрос и получен ответ. Также проверьте, сколько существует ожидающего запроса. Ниже приведен пример кода, который может помочь. Подробнее об HTTP-перехватчиках в Angular.

{

'request': function(config) { 
     rootScope = rootScope || $injector.get('$rootScope'); 
     rootScope.$broadcast('_START_REQUEST_'); 
     return config || $q.when(config); 
    }, 

    'requestError': function(rejection) { 
     return $q.reject(rejection); 
    }, 

    'response': function(response) { 

     if (response.status === 200) { 
      // do stuff when success 
     } 

     $http = $http || $injector.get('$http'); 

     if ($http.pendingRequests.length < 1) { 
      rootScope = rootScope || $injector.get('$rootScope'); 
      rootScope.$broadcast('_END_REQUEST_'); 
     } 

     return response || $q.when(response); 
    }, 

}

Позже в вашем контроллере/услуге вы можете проверить, если

$rootScope.$on('_END_REQUEST', function() { 
    // do stuff on request completed 
}); 

Приведенный выше код есть синтаксические ошибки. Но так оно и работает. Вы получите много примеров о HTTP-перехватчике.

Надежда, что помогает :)

Answer 2

Насколько я знаю, нет никакого способа, чтобы отслеживать ход выполнения RESTful запроса, как вы бы с обычной загрузкой файла.

Я пытался найти то же самое в течение пары недель, но безрезультатно.

После чего уже предыдущие ответы, единственные государства вы действительно можете отслеживать являются:

• Ваш предварительный запрос (до начала его загрузки)
• В запросе (в то время как его загрузка)
• Завершенный запрос (успешный/неудачный перевод)

И если вы хотите, время, необходимое для завершения запроса. Надеюсь, что это поможет :)

Answer 3

Вот мое решение для создания ретрансляционной анимации во время запросов api.

Сначала добавьте ответный перехватчик и перехватчик запросов, который отправляет широковещательную передачу корнеплодов. Затем создать директиву для прослушивания для этого ответа и запросить .:

  angular.module('mean.system') 
    .factory('myRestangular',['Restangular','$rootScope', function(Restangular,$rootScope) { 
    return Restangular.withConfig(function(RestangularConfigurer) { 
     RestangularConfigurer.setBaseUrl('http://localhost:3000/api'); 
     RestangularConfigurer.addResponseInterceptor(function(data, operation, what, url, response, deferred) { 
     var extractedData; 
     // .. to look for getList operations 
     if (operation === 'getList') { 
      // .. and handle the data and meta data 
      extractedData = data.data; 
      extractedData.meta = data.meta; 
     } else { 
      extractedData = data.data; 
     } 
     $rootScope.$broadcast('apiResponse'); 
     return extractedData; 
     }); 
     RestangularConfigurer.setRequestInterceptor(function (elem, operation) { 
     if (operation === 'remove') { 
      return null; 
     } 
     return (elem && angular.isObject(elem.data)) ? elem : {data: elem}; 
     }); 
     RestangularConfigurer.setRestangularFields({ 
     id: '_id' 
     }); 
     RestangularConfigurer.addRequestInterceptor(function(element, operation, what, url) { 
     $rootScope.$broadcast('apiRequest'); 
     return element; 
     }); 
    }); 
    }]); 

Вот директива:

 angular.module('mean.system') 
    .directive('smartLoadingIndicator', function($rootScope) { 
    return { 
     restrict: 'AE', 
     template: '<div ng-show="isAPICalling"><p><i class="fa fa-gear fa-4x fa-spin"></i>&nbsp;Loading</p></div>', 
     replace: true, 
     link: function(scope, elem, attrs) { 
     scope.isAPICalling = false; 

     $rootScope.$on('apiRequest', function() { 
      scope.isAPICalling = true; 
     }); 
     $rootScope.$on('apiResponse', function() { 
      scope.isAPICalling = false; 
     }); 
     } 
    }; 
    }) 
;