Angular 1.5.4 $http 进度事件
Angular 1.5.4 $http progress event
现在 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
如文档中所示 here,promise 中的第三个参数是 notify
函数。
notify(value)
- provides updates on the status of the promise's execution. This may be called multiple times before the promise is either resolved or rejected.
可以这样使用:
$http(requestData)
.then(
function success() {
console.log('success');
},
function error() {
console.log('error');
},
function notify() {
console.log('notified');
}
);
注意 - 我没有使用过 NG 1.5.4,下面的例子是利用现有的 pre 1.5.4 APIs
当您调用 $q.defer()
时,notify(event)
API 是 deferred 对象的一部分。我不确定通过 $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 调用联系起来。
好吧,我最终做了这样的事情,我自己处理了它,因为添加到 $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;
在 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}}%
结果:
现在 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
如文档中所示 here,promise 中的第三个参数是 notify
函数。
notify(value)
- provides updates on the status of the promise's execution. This may be called multiple times before the promise is either resolved or rejected.
可以这样使用:
$http(requestData)
.then(
function success() {
console.log('success');
},
function error() {
console.log('error');
},
function notify() {
console.log('notified');
}
);
注意 - 我没有使用过 NG 1.5.4,下面的例子是利用现有的 pre 1.5.4 APIs
当您调用 $q.defer()
时,notify(event)
API 是 deferred 对象的一部分。我不确定通过 $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 调用联系起来。
好吧,我最终做了这样的事情,我自己处理了它,因为添加到 $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;
在 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}}%
结果: