如何知道 Ionic 和 Angular 中每个 http 请求的请求进度 [英] How to know the request progress in each http request in Ionic and Angular

问题描述

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

I don't have any code to show in this question. I am trying to google for it if there is someone who already created this feature with documentation. I also tried to find if someone already asked this question but didn't have that much luck.

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

This is similarly to file download and upload with progress bar but that only works on file uploads/downloads but how can I dot it in just basic any post/put/delete request to the backend.

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

So the end goal is I want to had a progress bar for each post and put or maybe delete request if possible that I will show the user the progress of their request with some percentage inside a progress bar with style will be display to the client side.

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

I know some developers already did this normally in big companies.

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

I know this will be done in JavaScript and some CSS and HTML or XML.

我发现了一个与 axios 相关的问题或问题，并附有问题或问题的链接 这里.

I found one question or issue with axios with the link of the issue or question right here.

但我如何使用 http 或 httpClient 以 Angular 或 Ionic 方式执行此操作 最新版本的服务.

But how can I do this in the Angular or Ionic way using http or httpClient service in the latest version.

有什么建议吗?

推荐答案

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

I have officially found a solution for this. After careful reading and understanding the use of http-events with the help of this article. I finally figured out that I was writing the write code I just didn't tested it very well because I didn't use file uploads so the http progress is so fast.

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

So here is a sample of what I did.

在我的 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}% 

            Bytes being upload: ${event.loaded} 

            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，它将观察和监听我在上面创建的事件.

I also created an observable which will observe and listen to the event that I had created above.

在我的 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.

After you created an observable in your service-provider.ts you can now start listening to that observable base on the http event that is executed or requested.

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

Now in your page.ts import the service or provider where you created the observable and put this code below in the constructor or whatever life cycle event you want to perform.

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

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

Now you can do some state changes in the UI or perform another event base on that http event because you are now listening to the observable we created.

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

I found this ngx-loading-bar that can be useful for tracking events progress or loader.

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

NOTE: Use file uploads with simple text data instead of just small text data because small chunks of data without file will always return 100% when online or NaN with no connection even on low-end or mid-end devices.

这篇关于如何知道 Ionic 和 Angular 中每个 http 请求的请求进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！