Angular 1.5.4$http进度事件

Angular 1.5.4 $http progress event

本文关键字：事件 http Angular      更新时间：2023-09-26

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

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

在AngularJS v1.5.7中运行良好。如果你有机会，我建议你升级！

...//formData = new FormData(); etc...
var postParams = {
    method: 'POST',
    url: yourURLWS,
    transformRequest: angular.identity,
    uploadEventHandlers: {
        progress: function (e) {
                  if (e.lengthComputable) {
                     $scope.progressBar = (e.loaded / e.total) * 100;
                     $scope.progressCounter = $scope.progressBar;
                  }
        }
    },
    data: formData,
    headers: {'Content-Type': undefined }
};
var sendPost = $http(postParams); //etc...

在HTML中：

<progress id="progress" max="100" value="{{progressBar}}"></progress>{{progressCounter}}%

结果：

进度结果

该功能目前已损坏：https://github.com/angular/angular.js/issues/14436

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

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;

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

调用$q.defer()时，notify(event) 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)
})

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

我必须再次强调，我不完全确定如何将其与实际的外部http调用联系起来。

如这里的文档所示，promise中的第三个参数是notify函数。

notify(value)-提供有关承诺执行状态的更新。在承诺被解决或拒绝之前，这可能会被调用多次。

它可以这样使用：

$http(requestData)
    .then(
        function success() {
            console.log('success');
        },
        function error() {
            console.log('error');
        },
        function notify() {
            console.log('notified');
        }
    );
相关文章：