Angular中如何在subscribe函数中捕获文件上传接口的错误？

你不需要修改fileUploadService的任何代码，直接在组件侧调用订阅逻辑时添加错误处理即可，有两种常用实现方式：

方式1：使用subscribe的错误回调参数 #

这是最简便的方案，Observable.subscribe方法本身支持传入3个回调参数，第二个参数就是全局错误处理回调，所有请求链路中的异常都会进入该回调：

this.fileUploadService.fileUpload(formData).subscribe(
  result => {
    this.upload = result;
  },
  error => {
    // 此处可处理所有上传相关错误：服务端返回的4xx/5xx错误、网络中断、跨域问题等
    console.error('文件上传失败：', error);
    // 补充你的业务错误逻辑，比如提示用户、重置上传状态等
    this.uploadError = true;
    this.tipText = '文件上传失败，请检查网络后重试';
  }
)

该方式下捕获到错误后，当前Observable流会直接终止，不会再触发后续的next回调。

方式2：在组件侧通过catchError操作符处理 #

如果需要捕获错误后返回自定义 fallback 值，让流继续运行不终止，可以在组件调用时追加pipe处理：

1. 首先导入需要的rxjs操作符：

import { catchError, of } from 'rxjs';

2. 修改组件调用代码：

this.fileUploadService.fileUpload(formData)
  .pipe(
    catchError(error => {
      console.error('文件上传失败：', error);
      this.uploadError = true;
      this.tipText = '文件上传失败，请检查网络后重试';
      // 返回自定义的兜底结果，该结果会进入后续的next回调
      return of({ progress: 0, files: [], isError: true });
    })
  )
  .subscribe(result => {
    this.upload = result;
  })

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