如何使用Angular在$http中访问XHR？
目前我正在尝试用Angular实现上传功能。起初我使用XmlHttpRequest，但后来我将其改为$http。所以我发现我无法使用$http访问XmlHttpRequest来创建进度条。下面是我的代码。关于上传图片时创建进度条有什么建议吗？谢谢。
$http({
method: 'POST',
url: upload_url,
data: fd,
headers: {'Content-Type': undefined},
transformRequest: angular.identity
})回答 3
Stack Overflow用户
发布于 2017-05-16 16:31:47
下面是获取xhr对象的方法：
http://boylesoftware.com/blog/angular-tip-using-the-xmlhttprequest-object/
复制/粘贴：
通常，AngularJS应用程序使用$http服务来调用后端服务。但是，有时我们希望能够访问底层的XMLHttpRequest对象。我可以想出一些用例，但最突出的用例可能是能够跟踪长请求的进度，例如文件上传。为此，我们需要在XMLHttpRequest对象上为“正在进行”的事件注册一个事件侦听器。令人惊讶的是，Angular的$http服务没有以任何方式公开底层的XMLHttpRequest对象。所以，我们必须要有创意。这里有一种方法，…
$http服务的配置对象允许我们通过其“headers”属性向HTTP请求添加标头。这意味着在某些情况下，$http必须在它使用的XMLHttpRequest对象上设置这些头文件。实现这一点的方法是使用XMLHttpRequest的setRequestHeader方法。因此，我们的想法是覆盖XMLHttpRequest原型上的setRequestHeader方法，并使用一个特殊的头名称来引入一个挂钩。让我们从这个开始，创建一个简单的Angular模块，它在配置阶段执行方法替换：
angular.module("bsworksXHR", []).config([
function() {
XMLHttpRequest.prototype.setRequestHeader = (function(sup) {
return function(header, value) {
if ((header === "__XHR__") && angular.isFunction(value))
value(this);
else
sup.apply(this, arguments);
};
})(XMLHttpRequest.prototype.setRequestHeader);
}
]);现在，当我们进行$http服务调用时，我们可以添加一个名为“XHR”的标头和一个函数值，该函数值将接收XMLHttpRequest对象作为其唯一的参数。例如，应用程序中的其他位置：
$http({
…
headers: {
…
__XHR__: function() {
return function(xhr) {
xhr.upload.addEventListener("progress", function(event) {
console.log("uploaded " + ((event.loaded/event.total) * 100) + "%");
});
};
},
…
},
…
}).success(…);希望，AngularJS的未来版本将包括一些访问低级XMLHttpRequest对象的官方方式，即使受到限制，例如能够注册事件侦听器或将XMLHttpRequest事件转换为角度事件。在此之前，我将在我的应用程序中使用上面的方法。
Stack Overflow用户
发布于 2015-05-29 00:39:00
这可以为您提供以下服务：
$http.post('http://url.com', {parameter1:'parameter', parameter2: 'secondparameter'}).success(function (result) {
console.log(result.data);
}).error(function(data, status, headers, config) {
console.log(status);
}));Stack Overflow用户
发布于 2018-05-25 00:28:09
您可以使用$http配置的eventHandlers属性注册XMLHttpRequest侦听器，这将为您提供进度：
var onProgress = function(event) {
if (event.total) {
var progress = event.loaded * 100 / event.total;
// do stuff
}
};
$http({
method: 'POST',
url: upload_url,
data: fd,
headers: {'Content-Type': undefined},
transformRequest: angular.identity,
uploadEventHandlers: { progress: onProgress }
});我认为这应该涵盖了你的用例。我认为您也可以在事件侦听器中使用this来获取XmlHttpRequest实例。
https://stackoverflow.com/questions/16769125
复制相似问题
腾讯云开发者
