Angular服务responseType=Blob时错误处理问题排查与优化

错误原因排查 #

出现TypeError: Cannot read properties of undefined (reading 'getJsonError')的核心原因有两个：

• 依赖注入失效：ErrorService未正确注入到FileService中，导致this.errorService为undefined。
• 回调上下文丢失：在subscribe的错误回调中使用了普通函数，导致this指向偏离FileService实例，无法访问errorService。

具体排查步骤：

1. 检查服务注入配置：确保FileService和ErrorService都添加了@Injectable({ providedIn: 'root' })装饰器，或在模块providers数组中声明，避免依赖注入失败。
2. 修正回调写法：错误回调必须使用箭头函数，避免普通函数导致的this上下文丢失。
3. 补全Blob转JSON逻辑：后端错误返回JSON格式，但请求responseType设为Blob，需先将Blob转为JSON对象再传入getJsonError。

服务简化实现方案 #

1. ErrorService 简化实现 #

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ErrorService {
  getJsonError(errorObj: any): string {
    // 按后端JSON结构解析错误信息，示例逻辑
    return errorObj?.message || '下载失败，请稍后重试';
  }
}

2. FileService 简化实现 #

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
import { ErrorService } from './error.service';

@Injectable({ providedIn: 'root' })
export class FileService {
  constructor(private http: HttpClient, private errorService: ErrorService) {}

  downloadRaw(fileGUID: string) {
    return this.http.get(`/api/files/${fileGUID}`, {
      responseType: 'blob' as 'json' // 兼容Blob下载与JSON错误解析
    }).pipe(
      catchError((err: HttpErrorResponse) => {
        // 将Blob格式的错误响应转为JSON并处理
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.onload = () => {
            try {
              const errorJson = JSON.parse(reader.result as string);
              const errorMsg = this.errorService.getJsonError(errorJson);
              reject(new Error(errorMsg));
            } catch (parseErr) {
              reject(new Error('下载错误，无法解析错误信息'));
            }
          };
          reader.readAsText(err.error);
        });
      })
    );
  }
}

3. 组件调用简化 #

import { Component } from '@angular/core';
import { FileService } from './file.service';

@Component({
  selector: 'app-file-download',
  template: '<button (click)="downloadFile()">下载文件</button>'
})
export class FileDownloadComponent {
  constructor(private fileService: FileService) {}

  downloadFile() {
    const fileGUID = 'your-target-file-guid';
    this.fileService.downloadRaw(fileGUID).subscribe({
      next: (blob: Blob) => {
        // 处理正常下载的Blob，生成下载链接
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'target-file.ext'; // 可从响应头提取真实文件名
        a.click();
        window.URL.revokeObjectURL(url);
      },
      error: (err) => {
        alert(err.message); // 展示解析后的错误信息
      }
    });
  }
}

内容的提问来源于stack exchange，提问作者A. Gladkiy