javascript - 如何跟踪 Angular 2 服务调用的进度

Question

有人告诉我，我们使用服务来与数据库或其他数据存储库对话。当查询正在执行时，我希望能够在 UI 上放置一个进度条。

您如何跟踪完成百分比？谢谢

Answer 1

您可以选择 refer this to do it sanely with angular2 HTTP模块。

否则同样可以用 jQuery 中的 XHR progress 事件完成:

import { Subject } from 'rxjs/Subject';
export class ProgressLoader {
  percentage$: Subject<any>;

  constructor() {
    this.percentage$ = new Subject();
    $.ajax({
      type: 'GET',
      url: 'http://google.com',
      xhr: function() {
        var xhr = new window.XMLHttpRequest(),

        xhr.addEventListener("progress", (evt) => {
         this.percentage$.next(parseInt(evt.loaded / evt.total * 100, false) + '%');
        }, false);
        return xhr;
      }
    });
  }
}