Angular中如何用RxJS执行HTTP请求序列？视频上传订阅失败排查

核心问题 #

你的uploadImage函数没有返回有效的Observable，而且错误地在get请求的subscribe回调里处理后续post请求——外层函数根本拿不到post请求的数据流，调用者订阅自然无效。

具体问题点：

• 函数声明明确要返回Observable<IUploadedImage>，但你没在函数体外层写return语句，仅在subscribe内部return了post请求的Observable，这部分值不会被外层函数捕获。
• 使用subscribe会直接触发请求，而非把请求逻辑包装成Observable返回给调用者，违背了RxJS链式调用的设计原则。

修复方案 #

用RxJS的switchMap操作符串联两个请求，让整个函数返回完整的Observable流，调用者可直接订阅：

uploadImage(bucket: BucketTypes, file: File, customUrl?: string): Observable<IUploadedImage> {
  const formData = new FormData();
  formData.append('file', file);
  
  const params = {
    entity: bucket,
    fileExtension: file.type
  };

  // 第一步：返回get请求的Observable，用switchMap串联post请求
  return this.http.get<IUploadedImage>(
    customUrl ? customUrl : assetsUrl.uploadImage(this.baseUrl, bucket),
    { params }
  ).pipe(
    switchMap((response: any) => {
      const signedUrl = response.signedUrl;
      // 第二步：用签名URL发起post请求，返回这个Observable
      return this.http.post<IUploadedImage>(signedUrl, formData);
    })
  );
}

额外注意事项 #

• 如果你的签名URL要求直接上传文件二进制数据（而非FormData），需要把formData换成file本身，比如return this.http.post(signedUrl, file);，具体要看存储服务的接口要求。
• 建议添加错误处理，可在pipe中加入catchError操作符处理请求失败场景：

  import { catchError } from 'rxjs/operators';
  import { throwError } from 'rxjs';
  
  // ... 在pipe内添加
  catchError((error) => {
    console.error('上传失败', error);
    return throwError(() => new Error('上传失败'));
  })
  

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