Web请求上的进度条($ http)AngularJS

时间:2016-05-05 14:00:33

标签: angularjs angular-http

我是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");
  });

4 个答案:

答案 0 :(得分:6)

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

  • 估计请求需要多长时间,使用此值来构建进度条(当然,进度条只是实际等待时间的近似值)
  • 只需使用微调器。

我建议使用后一种选择。

答案 1 :(得分:2)

有一个名为Angular Loading Bar的可爱项目。

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

它非常易于使用,当您提出请求时,它会在地址栏下方显示进度条。试试看!有了它,您可以看到您提出的请求的进展情况。

答案 2 :(得分:0)

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

即可
bower install angular-loading-bar

并将其添加到app.js依赖项中:

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

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

答案 3 :(得分:0)

尝试这一个AngularJS的简洁,站点范围的进度条

Here