Angular $ http,$ q:跟踪进度

Question

有没有办法跟踪Angular $ http和$ q的http请求的进度？我正在从URL列表中进行$ http调用,然后使用$ q.all我将返回所有请求的结果.我想跟踪每个请求的进度(承诺已解决),以便我可以向用户显示一些进度.我正在考虑在承诺得到解决时发出事件,但我不确定它应该在哪里.

        var d = $q.defer();
        var promises = [];
        for(var i = 0; i < urls.length; i++){
            var url = urls[i];
            var p = $http.get(url, {responseType: "arraybuffer"});
            promises.push(p);
        }
        $q.all(promises).then(function(result){
            d.resolve(result);
        }, function(rejection){
            d.reject(rejection);
        });
        return d.promise;

编辑: 好的,经过一番摆弄,这就是我想出来的

        var d = $q.defer();
        var promises = [];
        var completedCount = 0;
        for(var i = 0; i < urls.length; i++){
            var url = urls[i];
            var p = $http.get(url, {responseType: "arraybuffer"}).then(function(respose){
              completedCount = completedCount+1;
              var progress = Math.round((completedCount/urls.length)*100);
              $rootScope.$broadcast('download.completed', {progress: progress});
              return respose;
            }, function(error){
              return error;
            });
            promises.push(p);
        }
        $q.all(promises).then(function(result){
            d.resolve(result);
        }, function(rejection){
            d.reject(rejection);
        });
        return d.promise;

不确定这是否是正确的做法.

Answer 1

我发现你已经编辑了自己的代码,但是如果你需要更全面的解决方案,请继续阅读

我曾经根据所有待处理的http请求制作了一个进度解决方案(显示某个加载的指示符,有点像youtube在顶部进度条上)

JS:

app.controller("ProgressCtrl", function($http) {

    this.loading = function() {
        return !!$http.pendingRequests.length;
    };

});

HTML:

<div id="fixedTopBar" ng-controller="ProgressCtrl as Progress">
    <div id="loading" ng-if="Progress.loading()">
        loading...
    </div>
</div>

.

性交

对于我的最新项目,它不仅仅是请求请求.我开始进入套接字,webworker,文件系统,文件读取器,dataChannel和任何其他使用的异步调用$q.所以我开始研究如何获得所有未决的承诺(包括$http).事实证明,没有任何角度解决方案,所以我有点猴子$q通过装饰修补了提供者.

app.config(function($provide) {

    $provide.decorator("$q", function($delegate) {
        // $delegate == original $q service

        var orgDefer = $delegate.defer;
        $delegate.pendingPromises = 0;

        // overide defer method 
        $delegate.defer = function() {
            $delegate.pendingPromises++; // increass
            var defer = orgDefer();

            // decreass no mather of success or faliur
            defer.promise['finally'](function() {
                $delegate.pendingPromises--;
            });

            return defer;
        }

        return $delegate
    });

});

app.controller("ProgressCtrl", function($q) {

    this.loading = function() {
        return !!$q.pendingPromises;
    };

});

这可能不适合每个人的生产需求,但它可能对开发人员有用,看看是否有任何未解决的问题留下并永远不会被调用