Angularjs HTTP服务POST进度事件 [英] Angularjs HTTP service POST progress event

问题描述

由于有关此主题的最多的话题是一岁多，我问自己，如果有什么好的解决方案来跟踪从HTTP服务的AJAX进度事件（用于装载酒吧或来跟踪许多字节它已下载）。如果不使用第三方的：）

这些事件：

  VAR阿贾克斯=新XMLHtt prequest（）;
ajax.addEventListener（进步）
ajax.addEventListener（装载）
ajax.addEventListener（错误）
ajax.addEventListener（终止）
 

解决方案

我已经使用与通知的进展的承诺取得这样的事情：

  VAR延期= $ q.defer（）;

变种FD =新FORMDATA（）;
fd.append（文件名，file.name）;
fd.append（文件，文件）;
VAR XHR =新XMLHtt prequest（）;

xhr.upload.addEventListener（进步，函数（事件）{
      deferred.notify（事件）;
}， 假）;

xhr.addEventListener（加载，功能（数据）{
     deferred.resolve（event.target.response）;
}， 假）;

xhr.addEventListener（错误，功能（数据）{
     deferred.reject（event.target.response）;
}， 假）;

xhr.addEventListener（中止，功能（数据）{
     deferred.reject（event.target.response）;
}， 假）;

xhr.open（POST，网址）;
xhr.send（FD）;

返回deferred.promise;
 

Since most topics about this subject are over a year old, I asked myself if there are any good solutions to track an ajax progress event from an http service (for a loading bar or to track how many bytes it has downloaded). Without the use of 3rd parties :)

these events:

var ajax = new XMLHttpRequest();
ajax.addEventListener("progress")
ajax.addEventListener("load")
ajax.addEventListener("error")
ajax.addEventListener("abort")

解决方案

I've made something like that using a promise with notify for the progress :

var deferred = $q.defer();

var fd = new FormData();
fd.append("Filename", file.name);
fd.append("file", file);
var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", function (event) {
      deferred.notify(event);
}, false);

xhr.addEventListener("load", function (data) {
     deferred.resolve(event.target.response);
}, false);

xhr.addEventListener("error", function (data) {
     deferred.reject(event.target.response);
}, false);

xhr.addEventListener("abort", function (data) {
     deferred.reject(event.target.response);
}, false);

xhr.open("POST", URL);
xhr.send(fd);

return deferred.promise;

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