Angular HTTP请求：同时处理文件响应与错误信息的实现方案问询

我需要向服务器发起请求，正常场景下返回文件，异常时返回错误信息。但当前无法同时兼容两种响应处理：

• 未添加{responseType: 'blob'}配置时，服务器返回文件会触发浏览器控制台的解析错误，错误信息如下：

{
    "headers": {
        "normalizedNames": {},
        "lazyUpdate": null
    },
    "status": 201,
    "statusText": "Created",
    "url": "http://localhost:8080/item/6310716b78015e32433ee34d/export",
    "ok": false,
    "name": "HttpErrorResponse",
    "message": "Http failure during parsing for http://localhost:8080/item/6310716b78015e32433ee34d/export",
    "error": {
        "error": {},
        "text": "PK\u0003\u0004\u0014\u0000\b\b\b\u0000�..."
    }
}

• 添加{responseType: 'blob'}配置后，文件可正常接收，但出现错误时无法直接获取可读的错误信息。

相关代码 #

请求服务代码

export(id: string, poolsName: string[]): Observable<Blob> {
  return this.http.post<Blob | any>(`${environment.apiUrl}/item/${id}/export`, poolsName)
}

组件代码

async fullExport(poolsName: string[]){

    if(this.projectId) {

      this.projectsService.export(this.projectId, poolsName).subscribe(
        (response: any) => {
          console.log("res: ", response);
          // const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
          // const url = window.URL.createObjectURL(blob);
          // const a = document.createElement('a');
          // document.body.appendChild(a);
          // console.log(url);
          // a.style.display = 'none';
          // a.href = url;
          // a.download = 'output.pptx';
          // a.click();
        },
        (error: any) => {
          console.log("error: ", error);
        }
      );
    }

}

解决方案 #

核心思路是统一用blob类型接收响应，文件直接处理下载，错误则将blob转换为可读的JSON/文本信息。具体步骤如下：

1. 修改请求服务，添加responseType: 'blob'配置 #

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

export(id: string, poolsName: string[]): Observable<Blob> {
  return this.http.post<Blob>(`${environment.apiUrl}/item/${id}/export`, poolsName, {
    responseType: 'blob' as 'json' // 类型断言绕过Angular类型检查
  });
}

2. 优化组件代码，分别处理文件下载与错误解析 #

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

async fullExport(poolsName: string[]){
  if(this.projectId) {
    this.projectsService.export(this.projectId, poolsName).subscribe(
      (response: Blob) => {
        // 处理文件下载逻辑
        const url = window.URL.createObjectURL(response);
        const a = document.createElement('a');
        document.body.appendChild(a);
        a.style.display = 'none';
        a.href = url;
        a.download = 'output.pptx';
        a.click();
        // 清理资源
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
      },
      async (error: HttpErrorResponse) => {
        // 解析错误信息
        if (error.error instanceof Blob) {
          try {
            const errorText = await error.error.text();
            const errorData = JSON.parse(errorText);
            console.log('错误详情：', errorData);
            // 这里可以根据业务需求展示错误提示，比如 errorData.message
          } catch (parseErr) {
            // 若无法解析为JSON，直接显示原始文本
            const errorText = await error.error.text();
            console.log('错误信息：', errorText);
          }
        } else {
          // 非blob类型错误，直接处理
          console.log('错误信息：', error.error);
        }
      }
    );
  }
}

关键说明 #

• 必须设置responseType: 'blob'：确保二进制文件能被正确接收，避免解析错误
• 错误响应的error字段是Blob类型：需要通过异步的text()方法转换为字符串，再尝试解析为JSON（服务器异常时应返回JSON格式的错误信息）
• 类型断言as 'json'：Angular的HttpClient对泛型和responseType有严格的类型匹配，用断言可以绕过这个限制，不影响功能

内容的提问来源于stack exchange，提问作者Илья Никитин