Web请求的进度条（$http）AngularJS答案

【问题标题】：progress bar on web request ($http) AngularJSWeb请求的进度条（$http）AngularJS
【发布时间】：2017-09-20 22:23:18
【问题描述】：

我是 AngularJS 的新手。我正在尝试向 Web 服务发出请求。我想实现一个进度条，告诉我这个请求的百分比。也许有人有一个可以指导我的基本示例。如果有人能帮我解决这个问题，我将不胜感激。我将尝试解释更多。我有这样的要求。我想让你告诉我从开始到结束的百分比。我是新手，所以我想找一些简单但实用的东西。

  $http({
    method: 'GET',
    url: "www.examplejson.com/example",
    timeout:5000
  }).success(function(data){
   console.log("complete!");
  }).error(function(response,status,headers,config) {
   console.log("error");
  });

【问题讨论】：

这支笔codepen.io/joe-watkins/pen/cvxuJ有用吗？
问题：你如何计算百分比？我想我在问你怎么知道请求完成了多少。我要做的一件事是创建一个显示微调器/等的拦截器，当请求完成或失败时，我关闭微调器。我不做百分比，我认为人们只是想知道正在发生的事情，他们应该等待它完成
另见chieffancypants.github.io/angular-loading-bar ...简单而有效...如果您想学习如何操作，只需查看coe内部... :-)
@MarcoS 我认为，看过这个例子。我不明白如何实现它，但我会尝试。就像我说我是 AngularJS 的新手
@Maccurt 非常感谢。但有必要显示百分比，因为我有非常繁重的网络请求。那么用户可能会认为应用程序已停止响应。

标签： angularjs angular-http

【解决方案1】：

无法知道简单 HTTP 请求的进度（百分比）。当您的请求离开客户端时，您从服务器听到的第一件事就是响应，这也意味着他已经完成了。因此，除非您正在流式传输某些内容并且可以逐步将状态从服务器发送到客户端，否则唯一的选择是：

估计请求将花费多少时间，使用此值来构建进度条（当然，进度条只是实际等待时间的近似值）
只需使用微调器即可。

我建议后一种选择。

【讨论】：

有可能，interceptors:docs.angularjs.org/api/ng/service/$http#interceptors

【解决方案2】：

有一个可爱的项目叫做 Angular Loading Bar。

http://chieffancypants.github.io/angular-loading-bar/

它非常易于使用，当您提出请求时，它会在地址栏下方显示一个进度条。试试看！有了它，您可以看到您提出的请求的进度。

【讨论】：

@lury Dias 我认为，看过这个例子。我不明白如何实现它，但我会尝试。就像我说我是 AngularJS 的新手
这很容易。如果您愿意，我可以帮助您实现它！ :) 就像@phuzi 说的那样，它没有以百分比显示实际进度，但它有助于了解请求需要多长时间。
@lury Dias 你可以帮我重新创建一个例子，有任何请求 $ http，我不工作我正在尝试。
@yavg 你可以给我发电子邮件！我很乐意提供帮助
@lury dias 你会说西班牙语吗？

【解决方案3】：

使用angular-loading-bar/ 非常简单：只需下载它

bower install angular-loading-bar

并将其添加到您的 app.js 依赖项中：

angular.module('myApp', ['angular-loading-bar'])

你已经完成了......它会在你的innerHtml顶部显示一个进度条......它不仅适用于$http，而且适用于任何异步调用，因为它可以用作中间件拦截器...

【讨论】：

但是，这样你就无法知道$http请求的实际百分比了。
只看到一个条形图，其相对于窗口长度的百分比长度与请求进度的百分比相同吗？
没有什么要实现的：只需安装并添加到您的应用程序依赖项... :-)

【解决方案4】：

试试这个 AngularJS 的纤细、站点范围的进度条

Here

【讨论】：