Angular4升Angular6时HttpClient报错：map/catch不存在于Observable<ArrayBuffer>

嘿，我来帮你理清楚这个升级遇到的问题！其实这两个报错都是因为HttpClient的默认行为和RxJS版本升级带来的变化，咱们一步步拆解：

为什么会报错？ #

1. HttpClient自动解析JSON，不需要手动调用res.json() #

Angular的HttpClient和旧的Http最大的区别之一就是：它默认会把响应体自动解析成JSON格式。也就是说，当你用HttpClient.get()发起请求时，返回的Observable已经是解析后的JSON对象了，不再是旧的Response类型，自然没有json()方法——这就是你调用map(res => res.json())时提示“map不存在于Observable”的原因。

2. RxJS 6+的操作符使用方式变了 #

Angular 6对应的RxJS版本是6.x，这个版本对操作符的调用方式做了重大调整：

• 原来的链式调用（比如.map().catch()）不再支持，必须把所有操作符放到pipe()方法里
• 原来的catch操作符改名为catchError，并且需要从rxjs/operators单独导入

正确的改造方案 #

你需要做这两件事：

1. 移除map(res => res.json())：完全不需要这一步了，HttpClient已经帮你完成了解析
2. 调整错误处理的操作符：把catch换成catchError，并用pipe()包裹所有操作符

改造前后的代码对比 #

旧的Http版本（Angular 4）

import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Observable';

// 服务中的方法
getSearchResults() {
  return this.http.get('https://dbpedia.org/sparql/your-endpoint')
    .map(res => res.json())
    .catch(error => {
      console.error('请求错误:', error);
      return Observable.throw(error.message || '服务器错误');
    });
}

新的HttpClient版本（Angular 6）

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

// 服务中的方法
getSearchResults() {
  return this.http.get('https://dbpedia.org/sparql/your-endpoint')
    .pipe(
      catchError((error: HttpErrorResponse) => {
        console.error('请求错误:', error);
        // 自定义错误信息并抛出
        return throwError(() => new Error(error.message || '服务器请求失败，请稍后重试'));
      })
    );
}

额外注意事项 #

• 确保你已经在根模块（比如AppModule）中导入了HttpClientModule，并移除原来的HttpModule：

  import { HttpClientModule } from '@angular/common/http';
  
  @NgModule({
    imports: [
      // ...其他模块
      HttpClientModule // 替换原来的HttpModule
    ]
  })
  export class AppModule { }
  

• 如果你的API返回的不是JSON格式（比如纯文本、Blob），可以在get请求中指定responseType，比如：

  this.http.get(url, { responseType: 'text' })
  

  不过DBpedia的API一般返回JSON，所以这个应该用不上。

总结 #

• 必须移除map(res => res.json())，因为HttpClient自动完成了解析
• catch不需要移除，但要改成RxJS 6+的catchError，并且放到pipe()中使用

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