Angular HttpClient如何判断分块下载请求是否已完成？

问题根源 #

你遇到的finalize每次分块送达就触发、无法判断全局下载结束的问题，分两种场景对应不同原因：

1. 如果是单个HTTP请求走chunked分块传输：你没有配置Angular HttpClient的事件监听模式，默认配置下HttpClient会把所有分块聚合完成后才返回完整响应，不会暴露分块接收过程
2. 如果浏览器网络面板显示每个分块对应独立请求：说明你的前端逻辑是每拉一个小分块就发起一次独立HTTP请求，单个请求的结束自然不能代表全局下载完成

对应解决方案 #

场景1：单个HTTP请求流式传输整个分片

调整HttpClient的请求配置，监听完整的HTTP事件流即可：

1. 构造HttpRequest时开启进度监听、设置观察对象为全事件：

const httpRequest = new HttpRequest('GET', '你的下载接口地址', {
  observe: 'events',
  responseType: 'arraybuffer',
  reportProgress: true
});

2. 订阅时按事件类型做对应处理，此时finalize只会在整个请求结束（成功/失败/取消）时触发一次：

import { HttpEventType } from '@angular/common/http';

this.http.request(httpRequest).pipe(
  finalize(() => {
    console.log('当前请求全部分块接收完成');
  })
).subscribe(event => {
  // 分块进度事件，每收到一个分块触发一次
  if (event.type === HttpEventType.DownloadProgress) {
    console.log(`已接收字节：${event.loaded}，总分片大小：${event.total ?? '后端未返回Content-Length时为空'}`);
  }
  // 全部分块接收完成事件，此时可以拿到完整的响应数据
  else if (event.type === HttpEventType.Response) {
    const fullArrayBuffer = event.body;
    console.log('整个分片下载完成', fullArrayBuffer);
  }
});

场景2：每个小分块对应独立HTTP请求

这种情况需要你自行维护全局下载状态：

• 方案1：前端提前从后端接口获取整个文件的总字节大小，每完成一个分块请求就累加已下载字节，累加值等于总大小时判定为全局下载完成
• 方案2：后端在当前请求的startBytes超过文件总大小时返回204状态码或者自定义响应头标识已到文件末尾，前端收到后停止发起后续分块请求即可

后端优化建议 #

你的NestJS接口有两处可优化点：

1. 重复设置了Cache-Control响应头，直接合并为res.setHeader("Cache-Control", "private, no-store")即可
2. 建议返回Content-Length响应头，值为endBytes - startBytes + 1，方便前端计算下载进度

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