restangular：是否有可能有一个进度条？答案

【问题标题】：restangular: is it possible to have a progress bar ?restangular：是否有可能有一个进度条？
【发布时间】：2014-11-09 15:44:43
【问题描述】：

我有这个基于restangular的代码（在服务中）（它有效）：

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

如何在我的控制器/指令中仅使用 Restangular 获取此上传的进度？我读过我可以编写直接使用 XHR 或 FileUpload 之类的 jQuery 插件的上传函数，但我只想使用 restangular，这样我的用户就不会加载无用的 js 文件。

或者是否有可能在上传开始时拦截？这样我就可以写一个div“Loading...”（好吧，它不像进度条，总比没有好）。

谢谢。

【问题讨论】：

标签： angularjs rest file-upload

【解决方案1】：

您可以使用 HTTP 拦截器来做到这一点。这将只是您的应用程序中的几行代码，可以很好地与 Restangular 配合使用。使用它，您可以确定何时开始请求并收到响应。还要检查存在多少待处理的请求。下面是可能有帮助的示例代码。阅读更多关于 Angular 中的 HTTP 拦截器。

{

    '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 拦截器的例子。

希望有帮助:)

【讨论】：

【解决方案2】：

据我所知，没有办法像普通文件上传那样跟踪 RESTful 请求的进度。

几周以来，我一直试图找到完全相同的东西，但无济于事。

按照前面的答案提到的，您真正可以跟踪的唯一状态是：

您的预请求（在开始上传之前）
请求期间（上传期间）
已完成的请求（成功/不成功的传输）

如果您愿意，还可以填写请求完成所需的时间。希望这会有所帮助:)

【讨论】：

【解决方案3】：

这是我在 api 请求期间创建 Restangular 动画的解决方案。

首先添加一个响应拦截器和一个发出根作用域广播的请求拦截器。然后创建一个指令来监听该响应和请求。：

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

【讨论】：