Angular分片上传无需Promise判断所有POST请求完成的实现方案

你可以直接使用Angular自带的RxJS库能力实现需求，全程不需要用到Promise，逻辑如下：

核心思路 #

• 先将所有分片的上传请求（Observable对象）存入一个数组，暂不订阅
• 使用RxJS的forkJoin操作符监听所有Observable的完成状态，所有请求都成功返回后forkJoin会触发回调，此时即可调用服务端分片重组接口

完整代码示例 #

import { forkJoin } from 'rxjs';
import { retry } from 'rxjs/operators';

// 省略你的其他变量定义：file、chunkSize、identifier、baseUrl 等
const uploadObservables = [];
let i = 0;
for(let offset = 0; offset < file.size; offset += chunkSize) {
  let chunk = file.slice( offset, offset + chunkSize );
  let formData = new FormData();
  formData.append("fileUpload", chunk, file.name + ".part" + i);
  formData.append("identifier", identifier.toString());
  // 这里不直接subscribe，把Observable存入数组，可加retry实现失败自动重传
  const uploadReq = this.http.post(this.baseUrl + "Upload", formData).pipe(
    retry(2) // 可选配置：单个分片上传失败自动重试2次
  );
  uploadObservables.push(uploadReq);
  i++;
}

// 监听所有上传请求完成状态
forkJoin(uploadObservables).subscribe({
  next: (results) => {
    // 所有分片上传成功，results是按顺序返回的每个接口的响应结果
    console.log('所有分片上传完成', results);
    // 此处调用服务端分片重组接口即可
    this.http.post(this.baseUrl + "MergeChunks", { identifier: identifier.toString() }).subscribe(() => {
      console.log('文件合并完成');
    })
  },
  error: (err) => {
    // 任意一个分片上传失败且重试后仍然失败会触发这里
    console.error('分片上传失败', err);
  }
})

补充说明 #

• 你不需要额外引入其他依赖，forkJoin是RxJS内置的操作符，Angular项目默认集成RxJS，直接导入使用即可
• 如果需要实现分片上传进度，可以将post方法配置reportProgress: true配合HttpEventType单独监听每个分片的上传进度

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