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

问题描述

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

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.

这与文件下载和上传进度条类似，但只能起作用在文件上传/下载，但我怎么能在基本的任何post / put / delete请求中点到它后面。

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 服务。

有任何建议吗？

如果此问题重复，请在将其标记为重复之前向我显示链接或简要解决方案。

If this question is duplicated please show me a link or a brief solution before marking it as a duplicate.

感谢是否有人可以帮帮我。
提前致谢。

Appreciate if someone could help. Thanks in advance.

推荐答案

我已经正式找到了解决方案。仔细阅读并理解 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}% \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，它会观察和收听我所拥有的事件在上面创建。

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后/ strong>您现在可以开始在已执行或请求的http事件上收听该可观察基础。

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的服务或提供程序，并将此代码放在构造函数或您要执行的任何生命周期事件中。

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, '\t')}`) })

现在你可以在UI中进行一些状态更改或者在http上执行另一个事件库event因为你现在正在听我们创建的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.

注意：使用简单文本数据的文件上传而不仅仅是小文本数据，因为没有文件的小块数据在联机或NaN时总是返回100％甚至没有连接在低端或中端设备上。

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屋！