Angular 1.5.4 $ http进度事件

时间:2016-04-14 12:15:22

标签: javascript angularjs http progress

现在,Angular 1.5.4最终允许您跟踪$ http提供程序上的进度事件,但由于某种原因,我不断将$ rootScope作为响应而不是实际进度(我用它来上传)信息。由于缺乏示例,我在Angular回购中找到了一些测试并遵循了但没有成功。

restClientInstance.post = function (requestParams) {
    var postParams = {
        method: "POST",
        url: API_URL + requestParams.url,
        headers: requestParams.headers,
        data: requestParams.data,
        eventHandlers: {
            progress: function (c) {
                console.log(c);
            }
        },
        uploadEventHandlers: {
            progress: function (e) {
                console.log(e);
            }
        }
    };

    var promise = $http(postParams)
    $rootScope.$apply();
    return promise;
};

在这两种情况下,它都安装$ rootScope而不是 lengthComputable

5 个答案:

答案 0 :(得分:10)

在AngularJS v1.5.7中工作正常。如果你有机会我推荐升级!

CREATE TABLE InternetHistory
(
    [User_ID] varchar(20),
    [Page_Accessed] varchar(20),
    [Date_Accessed] datetime
)
INSERT InternetHistory VALUES
('Johh.Doe', 'Google', '2015-01-01'),
('Johh.Doe', 'Google', '2015-01-01'),
('Suzy.Lue', 'Google', '2015-07-11'),
('Suzy.Lue', 'Wikipedia', '2015-04-23'),
('Babe Ruth', 'StackOverflow', '2015-01-09')

SELECT * FROM
(
    SELECT [User_ID], [Page_Accessed], RANK() OVER (PARTITION BY [Page_Accessed] ORDER BY COUNT(*) DESC) Ranking
    FROM InternetHistory
    GROUP BY [User_ID], [Page_Accessed]
) AS Src
PIVOT
(
    MAX([User_Id]) FOR [Page_Accessed] IN ([Google], [Wikipedia], [StackOverflow])
) AS Pvt
WHERE Ranking = 1
用HTML格式

{{1}}

结果:

progress result

答案 1 :(得分:2)

答案 2 :(得分:1)

注意 - 我没有使用NG 1.5.4,下面的示例是利用现有的1.5.4之前的API

当您致电notify(event)时,$q.defer() API是延迟对象的一部分。我不确定通过$http进行典型的 get / put / post 调用的实际实现是什么。但如果你想看到它的实际效果,你可以这样做:

某些服务API

var mockRqst = function(){
    var d = $q.defer()
    var crnt = 0

    $off = $interval( function(){
        d.notify( crnt )
        crnt += 5

        if (crnt >= 100)
        {
            $interval.cancel( $off ) //cancel the interval callback
            d.resolve( "complete" )
        }
    }

    return d.promise
}    

使用通知

someService.mockRqst()
.then( thenCallback, catchCallback, function( update ){
     console.log("update", update)
})  

codepen - http://codepen.io/jusopi/pen/eZMjrK?editors=1010

同样,我必须强调,我不完全确定如何将其绑定到实际的外部http调用中。

答案 3 :(得分:1)

好吧,我最终做了类似这样的事情并且自己处理它,因为添加到$ http的XHR事件对我不起作用。

\9

答案 4 :(得分:-1)

如文档here所示,承诺中的第三个参数是notify函数。

  

notify(value) - 提供有关承诺执行状态的更新。在承诺解决或拒绝之前,可以多次调用此方法。

可以像这样使用:

$http(requestData)
    .then(
        function success() {
            console.log('success');
        },
        function error() {
            console.log('error');
        },
        function notify() {
            console.log('notified');
        }
    );