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或像FileUpload这样的jQuery插件的上传函数，但我想只使用restangular，这样我的用户就不会加载无用的js文件。

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

感谢。

Answer 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拦截器的许多示例。

希望有所帮助：）

Answer 2

据我所知，无法像正常文件上传一样跟踪RESTful请求的进度。

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

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

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

如果您愿意，请完成请求所需的时间。希望这会有所帮助：）

Answer 3

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

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

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

restangular：有可能有进度条吗？

3 个答案: