如何为 $http 请求添加进度条答案

【问题标题】：How to add a Progress bar for $http request如何为 $http 请求添加进度条
【发布时间】：2020-03-27 10:01:42
【问题描述】：

我想在整个页面上添加一个加载栏或加载动画，直到数据通过 $http 请求从 Mongo 数据库获取到 Web 应用程序。

我已经研究了具有此功能的 XMLHTTP 请求，但我想使用 $http。

我的代码是这样的

$http.post("/someroute", someData)
.then(function(res) {
   $scope.variable = res.data;
   $(".webcontent").css("display", "block");
})

我想确保在打开我的 Web 应用程序时不会向用户显示未格式化的页面。范围变量用于使用 ng-repeat 填充模板。

【问题讨论】：

【解决方案1】：

您可以指定eventHandlers 附加到底层XMLHttpRequest。我还没有测试过，但是这样的东西应该可以工作：

$http.post("/someroute", someData, {
  eventHandlers: {
    progress: function(progressEvent) {
      // update progress bar
    }
  }
})

请注意，事件处理程序在摘要循环中运行，正如您对 AngularJS 所期望的那样。

您获得的事件是ProgressEvent，您可以从中计算百分比。

【讨论】：