如何知道 Ionic 和 Angular 中每个 http 请求的请求进度答案

【问题标题】：How to know the request progress in each http request in Ionic and Angular如何知道 Ionic 和 Angular 中每个 http 请求的请求进度
【发布时间】：2018-07-03 00:18:18
【问题描述】：

我没有任何代码可以在这个问题中显示。如果有人已经使用文档创建了此功能，我正在尝试搜索它。我还试图找出是否有人已经问过这个问题但没有那么幸运。

这类似于文件下载和带进度条的上传，但仅适用于文件上传/下载，但我如何才能将它添加到后端的任何基本发布/放置/删除请求中。

所以最终目标是我希望每个帖子都有一个进度条，并在可能的情况下放置或删除请求，我将在进度条内以一定百分比向用户显示他们的请求进度，并显示样式客户端。

我知道一些开发人员已经在大公司中通常这样做了。

我知道这将在 JavaScript 和一些 CSS 和 HTML 或 XML 中完成。

我在axios 找到了一个问题或问题，并带有问题或问题的链接here。

但是我怎样才能以 Angular 或 Ionic 的方式使用最新版本的 http 或 httpClient 服务。

有什么建议吗？

【问题讨论】：

我想这就是你要找的东西：angular.io/guide/http#listening-to-progress-events
谢谢你！我认为这会对我有所帮助。但是文档没有提供关于如何使用承诺来使用它？有什么建议吗？
为了了解如何集成这部分，您应该从文档流程的开头开始：angular.io/guide/http
@monogate 我终于使用了它，但它只给了我进度它要么是 NaN 离线时和 100% 在低端和高端连接上，即使在使用 observables 我需要从 0, 1, 2, 50 - 100% 我有一个新问题，顺便说一句，link

标签： angular http ionic3 progress-bar progress

【解决方案1】：

我已经正式找到了解决方案。在此article的帮助下，仔细阅读并了解http-events的使用。终于弄明白是自己写的写代码，只是没测试好，因为没有使用文件上传所以http进度太快了。

所以这是我所做的一个示例。

在我的 provider.ts

publishSomeAPI(data) {
    const req = new HttpRequest('POST', `${url}/someAPIEndpoint`, data, {
      // headers: You can put your headers type hear such as content/type, token...
      reportProgress: true
    });

    return new Promise((resolve, reject) => {
      this.http.request(req).subscribe((event: HttpEvent<any>) => {
        switch (event.type) {
          case HttpEventType.Sent:
            console.log('Request sent!');
            this.getHttpEvent().next(event);
            break;
          case HttpEventType.ResponseHeader:
            console.log('Response header received!');
            this.getHttpEvent().next(event);
            break;
          case HttpEventType.UploadProgress:
            this.getHttpEvent().next(event);
            const percentDone = Math.round(100 * event.loaded / event.total);
            console.log(`Posting in progress! ${percentDone}% \n
            Bytes being upload: ${event.loaded} \n
            Total no. of bytes to upload: ${event.total}`);
            break;
          case HttpEventType.Response:
            this.getHttpEvent().next(event);
            console.log('Done!', event.body);
            resolve(event);
        }
      }, err => {
        console.log(err);
        reject(err)
      });
    });
  }

我还创建了一个 observable，它将观察和监听我在上面创建的事件。

在我的 provider.ts 文件顶部。

private httpEventListener: Subject<Object> = new Subject<Object>();
  observeHttp: Observable<Object> = this.httpEventListener.asObservable();

下面。

  getHttpEvent(): Subject<Object> {
    return this.httpEventListener;
 }

在 service-provider.ts 中创建 observable 后，您现在可以根据执行或请求的 http 事件开始侦听该 observable。

现在在您的 page.ts 中导入您创建 observable 的 service 或 provider 并将此代码放在下面的构造函数或您想要执行的任何生命周期事件中.

this.someService.observeHttp.subscribe(data => { console.log(`An http event happened: ${JSON.stringify(data, null, '\t')}`) })

现在您可以在 UI 中进行一些状态更改或基于该 http 事件执行另一个事件，因为您现在正在侦听我们创建的 observable。

我发现这个ngx-loading-bar 对跟踪事件进度或加载程序很有用。

注意： 使用带有简单文本数据的文件上传，而不仅仅是小文本数据，因为没有文件的小块数据在在线时总是会返回 100%，或者即使在低端或无连接的 NaN 或中端设备。

【讨论】：