Angular中@angular/http与@angular/common/http的HttpClient有何区别？

嘿，这个问题问到点子上了！Angular发展过程中确实推出过两代HTTP客户端，分别属于@angular/http（旧版）和@angular/common/http（新版，Angular 4.3+引入），尤其是Angular 5的时候，旧版已经被标记为弃用了，二者的核心差异我给你拆解清楚：

1. 版本状态与官方态度 #

• 旧版的Http服务（属于@angular/http模块）在Angular 4.3之后就被**弃用（deprecated）**了，Angular 5及更高版本官方明确推荐使用@angular/common/http里的HttpClient，旧模块后续会被彻底移除，新项目绝对别再用旧的了。

2. API简洁度与默认行为 #

• 默认JSON解析：旧版Http每次请求都得手动调用.map(res => res.json())来解析响应体，新版HttpClient默认就会把响应解析成JSON对象，省了大量重复代码：
  旧版写法：

  this.http.get('/api/users').map(res => res.json()).subscribe(users => {...});
  

  新版写法：

  this.httpClient.get('/api/users').subscribe(users => {...});
  

• 泛型支持：新版HttpClient支持泛型，可以直接指定响应类型，TypeScript能提供完整的类型校验：

  interface User { id: number; name: string; }
  this.httpClient.get<User[]>('/api/users').subscribe(users => {
    // 这里users会被自动推断为User[]类型，编辑器能给出智能提示
  });
  

3. 拦截器机制（核心升级） #

新版HttpClient内置了**HttpInterceptor拦截器**，可以轻松实现全局请求/响应的统一处理：比如给所有请求加Authorization头、全局捕获错误、统一显示加载状态等。旧版Http没有原生拦截器支持，要实现类似功能得自己封装服务，复杂度高很多。

举个简单的拦截器示例：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 给请求添加token
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer ' + localStorage.getItem('token'))
    });
    return next.handle(authReq);
  }
}

4. 错误处理体验 #

• 新版HttpClient返回的HttpErrorResponse包含更全面的错误信息：状态码、错误消息、响应体、请求上下文等，结合拦截器可以统一处理所有请求错误，不用每个请求都写重复的错误逻辑。
• 旧版Http的错误信息相对简陋，处理起来更繁琐。

5. 请求参数处理 #

• 新版HttpClient支持直接传递对象作为params，会自动序列化为查询字符串，支持复杂对象：

  this.httpClient.get('/api/data', {
    params: { page: 1, size: 10, sort: 'name' }
  });
  

• 旧版Http需要手动创建URLSearchParams对象来处理参数，写法繁琐：

  const params = new URLSearchParams();
  params.set('page', '1');
  params.set('size', '10');
  this.http.get('/api/data', { search: params });
  

6. 响应类型灵活性 #

新版HttpClient支持多种响应类型（json、blob、text、arraybuffer），直接通过responseType指定即可：

// 下载文件获取Blob
this.httpClient.get('/api/file', { responseType: 'blob' }).subscribe(blob => {...});

旧版虽然也支持，但写法更复杂，不够直观。

7. 依赖注入简化 #

• 新版只需要在根模块导入HttpClientModule，然后直接注入HttpClient即可使用。
• 旧版需要导入HttpModule，注入Http服务，还得额外处理依赖（比如XHRBackend），配置更麻烦。

总的来说，@angular/common/http里的HttpClient是旧版Http的全面升级，解决了旧版本的诸多痛点，API更简洁、功能更强大，是Angular 5及以后版本的标准选择。

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