Angular 5：如何显示GET Http(XHR)请求的状态

嘿，我太懂你的痛点了——当用户触发一个需要拉取大量数据的GET请求，网络慢或者数据量超大的时候，30秒没反馈，用户真的会慌，以为页面卡死了。刚好Angular的HttpClient自带了监听请求进度的能力，不用折腾第三方库，我给你一步步拆解实现方法：

核心逻辑：监听HTTP进度事件 #

Angular的HttpRequest可以开启reportProgress选项，这样就能拿到请求从发送到完成的全流程事件，包括下载进度，咱们就靠这个来驱动Spinner和进度显示。

具体实现步骤 #

1. 先搞定你的Spinner组件 #

假设你已经有了可用的Spinner（比如叫LoadingSpinnerComponent），先确保它能通过一个布尔值控制显隐，比如加个@Input() isLoading: boolean，这样组件里就能直接控制它什么时候显示。

2. 在数据服务里封装带进度的GET请求 #

别直接用http.get()，改用http.request()，因为只有后者支持进度报告。在你的数据服务里写个方法：

import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private http: HttpClient) {}

  fetchLargeDataset(url: string): Observable<HttpEvent<any>> {
    // 创建一个带进度报告的GET请求
    const request = new HttpRequest('GET', url, {
      reportProgress: true, // 必须开这个，才会返回进度事件
      responseType: 'json' // 按需调整，比如拉文件用'blob'
    });

    return this.http.request(request);
  }
}

3. 在组件里订阅事件，控制Spinner和进度 #

在需要发起请求的页面组件里，注入服务，然后订阅请求，同时处理不同阶段的事件：

import { Component } from '@angular/core';
import { DataService } from './data.service';
import { HttpEvent, HttpEventType } from '@angular/common/http';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-large-data-page',
  template: `
    <!-- 你的Spinner组件 -->
    <app-loading-spinner [isLoading]="isLoading"></app-loading-spinner>
    
    <!-- 数据展示区域 -->
    <div class="data-container" *ngIf="dataset">
      <!-- 这里放你的数据渲染逻辑 -->
    </div>

    <!-- 可选：显示进度百分比 -->
    <p class="progress-text" *ngIf="progress !== null">
      加载中：{{ progress }}%
    </p>

    <!-- 可选：取消请求按钮 -->
    <button *ngIf="isLoading" (click)="cancelRequest()">取消加载</button>
  `
})
export class LargeDataPageComponent {
  isLoading = false;
  progress: number | null = null;
  dataset: any;
  private requestSub: Subscription | null = null;

  constructor(private dataService: DataService) {}

  loadDataset() {
    this.isLoading = true;
    this.progress = null;

    // 订阅请求事件
    this.requestSub = this.dataService.fetchLargeDataset('/api/your-large-data')
      .subscribe({
        next: (event: HttpEvent<any>) => {
          switch (event.type) {
            case HttpEventType.Sent:
              // 请求刚发出去，这里可以加个日志或者初始化逻辑
              console.log('请求已发送，等待响应...');
              break;
            case HttpEventType.DownloadProgress:
              // 计算下载进度
              if (event.total) {
                this.progress = Math.round((100 * event.loaded) / event.total);
              } else {
                // 服务器没返回Content-Length，只能显示"加载中..."
                this.progress = null;
              }
              break;
            case HttpEventType.Response:
              // 请求完成，拿到数据
              this.dataset = event.body;
              this.isLoading = false;
              this.progress = null;
              break;
          }
        },
        error: (err) => {
          console.error('请求出错:', err);
          // 出错也要关闭Spinner
          this.isLoading = false;
          this.progress = null;
          // 这里可以加个错误提示给用户
        },
        complete: () => {
          // 请求完成（无论成功失败）的收尾逻辑
          this.requestSub = null;
        }
      });
  }

  // 可选：给用户取消请求的能力
  cancelRequest() {
    if (this.requestSub) {
      this.requestSub.unsubscribe();
      this.isLoading = false;
      this.progress = null;
    }
  }
}

几个关键注意点 #

• reportProgress必须设为true：默认是关闭的，不开的话拿不到进度事件。
• 区分DownloadProgress和UploadProgress：GET请求是下载数据，所以监听DownloadProgress；如果是POST上传文件，就用UploadProgress。
• 处理event.total为null的情况：有些后端不会返回Content-Length响应头，这时候没法计算百分比，你可以改成显示“加载中...”或者一个无限循环的动画。
• 及时关闭Spinner：不管请求成功还是失败，都要把isLoading设为false，别让Spinner一直转。

额外优化建议 #

如果你的请求经常超过30秒，建议和后端同学沟通下：

• 能不能做数据分页，每次只拉一部分数据，用户滚动到底部再加载下一页；
• 或者做增量加载，只返回用户当前需要的数据；
• 后端也可以优化接口性能，比如缓存常用数据，减少查询时间。

这样用户就能清晰看到请求的进度，再也不会误以为页面冻结了！

内容的提问来源于stack exchange，提问作者redOctober13