Angular 1.5.4 $ http进度事件 [英] Angular 1.5.4 $http progress event

问题描述

现在，Angular 1.5.4最终允许您跟踪$ http提供程序上的进度事件，但出于某种原因，我一直将$ rootScope作为响应而不是实际进度（我将其用于上传）信息。由于缺少示例，我在Angular repo中找到了一些测试，但是没有成功。

Now Angular 1.5.4 finally allows you to track progress event on $http provider but for some reason I keep getting the $rootScope as a response instead of an actual progress (I'm using it for uploads) information. Because of lack of examples I found some tests in the Angular repo and followed that but to no success.

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

In both cases it consoles $rootScope rather than the lengthComputable

推荐答案

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

Well I ended up doing something like this and just handle it myself as the XHR events added to $http dont work for me.

var xhttp = new XMLHttpRequest();
var promise = $q.defer();

xhttp.upload.addEventListener("progress",function (e) {
    promise.notify(e);
});
xhttp.upload.addEventListener("load",function (e) {
    promise.resolve(e);
});
xhttp.upload.addEventListener("error",function (e) {
    promise.reject(e);
});

xhttp.open("post",API_URL + requestParams.url,true);

xhttp.send(requestParams.data);

return promise.promise;

这篇关于Angular 1.5.4 $ http进度事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！