Angular 2 HTTP 进度条 [英] Angular 2 HTTP Progress bar

问题描述

目前在 Angular 2 中是否有一种方法可以使用 angular2/http 模块检索 ajax 调用的进度(即完成百分比)?

Is there currently a way within Angular 2 to retrieve the progress (i.e. percentage done) of an ajax call, using the angular2/http module?

我使用以下代码进行 HTTP 调用:

I use the following code to make my HTTP calls:

        let body = JSON.stringify(params);
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        this.http.post(url, body, options)
            .timeout(10000, new Error('Timeout exceeded during login'))
            .toPromise()
            .then((res) => {
                ...
            }).catch((err) => {
                ...
            });

目标是编写一个同步系统.帖子会返回大量数据，我想告诉用户同步需要多长时间.

The goal is to write a synchronisation system. The post will return a lot of data, and I want to give the user an indication on how long the syncing will take.

推荐答案

目前(从 v. 4.3.0 开始，当使用来自 @ngular/common/httpHttpClient 时>) Angular 提供开箱即用的监听进度.您只需要创建 HTTPRequest 对象，如下所示:

Currently (from v. 4.3.0, when using new HttpClient from @ngular/common/http) Angular provides listening to progress out of the box. You just need to create HTTPRequest object as below:

import { HttpRequest } from '@angular/common/http';
...

const req = new HttpRequest('POST', '/upload/file', file, {
  reportProgress: true,
});

当您订阅请求时，您将在每个进度事件中调用订阅:

And when you subscribe to to request you will get subscription called on every progress event:

http.request(req).subscribe(event => {
  // Via this API, you get access to the raw event stream.
  // Look for upload progress events.
  if (event.type === HttpEventType.UploadProgress) {
    // This is an upload progress event. Compute and show the % done:
    const percentDone = Math.round(100 * event.loaded / event.total);
    console.log(`File is ${percentDone}% uploaded.`);
  } else if (event instanceof HttpResponse) {
    console.log('File is completely uploaded!');
  }
});

更多信息这里.

这篇关于Angular 2 HTTP 进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！