4

有没有办法使用 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;

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

4

2 回答 2

6

我看到您已经编辑了自己的代码，但如果您需要更全面的解决方案，请继续阅读

我曾经根据所有待处理的 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;
    };

});

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

于 2014-03-11T22:59:51.763 回答
4

制作一个小的通用辅助函数：

function allWithProgress(promises, progress) {
    var total = promises.length;
    var now = 0;
    promises.forEach(function(p) {
        p.then(function() {
            now++;
            progress(now / total);
        });
    })
    return $q.all(promises);
}

然后使用它：

var promises = urls.map(function(url) {
    return $http.get(url, {responseType: "arraybuffer"});
});

allWithProgress(promises, function(progress) {
    progress = Math.round(progress * 100);
    $rootScope.$broadcast('download.completed', {progress: progress});
}).catch(function(error) {
    console.log(error);
});
于 2014-04-26T14:15:20.967 回答