如何为Angular中的HTTP GET请求实现进度条？

Angular 客户端实现 #

Angular的HttpClient支持监听HTTP请求的进度事件，通过配置reportProgress: true和observe: 'events'，可以获取下载过程中的已加载字节数和总字节数，从而计算进度。

示例代码：

import { HttpClient, HttpEvent, HttpEventType } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-data-fetcher',
  template: `<div class="progress-bar" [style.width.%]="progress"></div>`
})
export class DataFetcherComponent {
  progress = 0;

  constructor(private http: HttpClient) {}

  fetchData() {
    this.http.get('http://your-falcon-server/endpoint', {
      reportProgress: true,
      observe: 'events',
      responseType: 'blob' // 根据数据类型调整，比如'json'如果是JSON数据
    }).subscribe((event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.DownloadProgress:
          if (event.total) {
            this.progress = Math.round((100 * event.loaded) / event.total);
          }
          break;
        case HttpEventType.Response:
          // 处理获取到的数据
          const data = event.body;
          break;
      }
    });
  }
}

Falcon 服务端配合 #

要让客户端能计算准确的进度，服务端必须返回Content-Length响应头，告知客户端数据的总大小。

静态数据/文件场景 #

如果返回的是静态文件或预先计算好大小的数据，直接设置响应头即可：

import falcon
import os

class DataResource:
    def on_get(self, req, resp):
        file_path = '/path/to/your/data.file'
        file_size = os.path.getsize(file_path)
        
        resp.content_type = 'application/octet-stream' # 根据数据类型调整
        resp.set_header('Content-Length', str(file_size))
        
        with open(file_path, 'rb') as f:
            resp.body = f.read()

app = falcon.App()
app.add_route('/endpoint', DataResource())

动态生成数据场景 #

如果数据是动态生成的，需要先将数据写入内存计算大小，再设置响应头返回：

import falcon
import io

class DynamicDataResource:
    def on_get(self, req, resp):
        # 动态生成数据
        dynamic_data = b'your dynamically generated data content'
        data_size = len(dynamic_data)
        
        resp.content_type = 'application/json' # 假设是JSON数据
        resp.set_header('Content-Length', str(data_size))
        resp.body = dynamic_data

app = falcon.App()
app.add_route('/dynamic-endpoint', DynamicDataResource())

跨域场景注意 #

如果Angular客户端和Falcon服务端不在同一域，需要配置CORS允许暴露Content-Length头：

from falcon_cors import CORS

cors = CORS(
    allow_origins=['http://your-angular-domain'],
    allow_headers=['*'],
    expose_headers=['Content-Length']
)

app = falcon.App(middleware=[cors.middleware])

关键注意点 #

• 如果服务端未返回Content-Length，客户端无法获取总数据大小，只能显示已加载的字节数，无法计算百分比进度。
• 对于超大文件，Falcon可以考虑分块传输，但此时需要额外处理进度计算逻辑。

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