Angular 5.1.0拦截非JSON响应及RxJS操作符报错求助

我来帮你一步步解决这些问题，都是Angular 5版本里常见的小坑：

1. 先解决拦截器的catch方法不存在错误 #

在Angular 5对应的RxJS 5.x版本中，catch已经不再是Observable的原型方法了，必须使用pipeable操作符catchError，而且要单独导入。同时，抛出错误要用Observable.throw而不是后来版本的throwError。

首先导入必要的依赖：

import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { HttpEvent, HttpRequest, HttpHandler, HttpErrorResponse, HttpResponse } from '@angular/common/http';

然后修改拦截器代码，针对你的需求调整逻辑——不抛出blob类型的解析错误，直接返回原始响应：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(req).pipe(
    catchError((error: HttpErrorResponse) => {
      // 只处理"响应码200但解析失败"的情况
      if (error instanceof HttpErrorResponse && error.status === 200) {
        const contentType = error.headers.get('content-type');
        // 判断是否是二进制类型（比如图片），跳过JSON解析
        if (contentType && !contentType.includes('application/json')) {
          // 把原始错误中的blob包装成HttpResponse返回，保证类型匹配
          return of(new HttpResponse({
            body: error.error,
            headers: error.headers,
            status: error.status,
            statusText: error.statusText,
            url: error.url
          }) as HttpEvent<any>);
        }
      }
      // 其他类型的错误正常抛出
      return Observable.throw(error);
    })
  );
}

2. 修正你的GET请求代码（关键！） #

你之前的getImage方法犯了一个常见错误：指定响应类型的参数是responseType，不是headers里的resourceType！Angular不会识别headers里的resourceType，所以它还是会默认尝试把响应解析成JSON，这才是你一直收到解析错误的核心原因。

修改后的请求代码：

getImage(imageUrl: string) {
  const httpOptions = {
    headers: new HttpHeaders({
      'Authorization': 'Basic ' + this.authService.getBasicAuthString()
    }),
    // 明确告诉Angular要把响应解析成blob，加类型断言绕过TypeScript检查
    responseType: 'blob' as 'json'
  };
  // 这里不需要指定<File>，返回的是Observable<Blob>
  return this.http.get(imageUrl, httpOptions);
}

3. 解释你之前用of()遇到的错误 #

• Cannot find name 'of'：你用了旧的原型扩展导入方式import 'rxjs/add/observable/of'，在RxJS 5.x的pipeable模式下，应该直接从rxjs导入of，也就是我们上面写的import { Observable, of } from 'rxjs';
• 类型不匹配：你返回的req是请求对象，不是HttpEvent类型，所以必须包装成HttpResponse才能符合拦截器的返回类型要求。

最后验证效果 #

做完这两个修改后，你的请求会：

1. 明确告诉Angular要处理blob类型响应，避免默认的JSON解析
2. 即使遇到解析错误（比如那个未修复的bug触发），拦截器也会把原始的blob响应返回给订阅者，不会抛出解析错误

这样你就能正常拿到图片的blob数据了。

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