ajax – Angular $http,$q：跟踪进度

发布时间：2020-12-16 02:54:38 所属栏目：百科来源：网络整理

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

有没有办法跟踪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;

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

解决方法

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

我曾经根据所有待处理的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).原来没有任何有角度的解决方案,所以我有点猴子在decorating修补了$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;
    };

});

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!