TypeScript：Angular 11单次调用同时处理Blob或JSON返回的方法

核心逻辑 #

盲目把responseType改成json是最常见的踩坑点——这会直接让返回的文件流被强制按JSON规则解析，损坏文件内容，完全无法使用。当前配置保留responseType: 'blob'是合理的，配合observe: 'response'拿到完整响应元数据，就可以自行判断实际返回的内容类型，分别做对应处理。

具体实现步骤 #

• 保留现有请求的基础配置：observe: 'response'的配置必须保留，否则无法获取响应头信息，也就没法判断返回内容的实际类型。
• 在管道流中加入内容类型判断逻辑：

1. 从响应头的Content-Type字段判断返回类型，如果包含application/json，说明是错误响应，需要将Blob转成文本后解析为结构化JSON错误。
2. 如果返回类型是文件流对应的MIME类型（如application/octet-stream、image/png等），直接返回Blob数据，供后续生成下载链接使用。

• 错误处理衔接：解析得到的JSON错误，需要包装成HttpErrorResponse格式抛出，让现有错误拦截器可以正常捕获处理，不需要额外改造全局错误逻辑。

完整服务代码示例 #

import { HttpErrorResponse } from '@angular/common/http';
// 其他服务依赖按常规导入即可
uploadFileWithDownloadResult(formData: FormData) {
  return this._http.post(
    this.baseUrl,
    formData,
    {
      observe: 'response',
      responseType: 'blob'
    }
  ).pipe(
    map(async (res) => {
      const contentType = res.headers.get('Content-Type') ?? '';
      // 命中JSON错误响应分支
      if (contentType.includes('application/json')) {
        const errorText = await res.body!.text();
        const parsedError = JSON.parse(errorText);
        // 抛出符合Angular规范的错误，可被现有错误流正常捕获
        throw new HttpErrorResponse({
          error: parsedError,
          status: res.status,
          url: this.baseUrl
        });
      }
      // 命中文件响应分支，提取响应中的文件名供下载使用
      const disposition = res.headers.get('Content-Disposition') ?? '';
      const fileNameMatch = disposition.match(/filename\*?=(?:UTF-8'')?"?([^";]+)"?/);
      return {
        fileBlob: res.body!,
        fileName: fileNameMatch?.[1] ?? 'default-download-file'
      };
    }),
    switchMap(observableResult => observableResult)
  );
}

注意事项 #

• 优先依赖后端正确设置响应头的Content-Type字段做类型判断，如果后端存在响应头缺失的问题，可以加兜底逻辑：尝试将Blob按JSON格式解析，解析失败则判定为文件流。
• Blob转文本的操作是异步的，需要通过switchMap把异步返回的Promise打平到可观察流中，避免管道返回嵌套的Promise对象导致后续逻辑异常。
• 提取文件名的正则需要兼容RFC 5987标准的UTF-8编码文件名格式，避免中文文件名出现乱码。

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