面试题：Angular中HttpClient模块如何进行GET请求并处理响应数据

在Angular项目里，假设后端有一个接口/api/users，返回用户列表数据。请用HttpClient模块发送GET请求获取这些数据，并在组件中正确处理响应，将数据打印到控制台。同时，请说明HttpClient模块相比之前的Http模块有哪些优势。

17.7万热度

难度

前端开发Angular

使用HttpClient模块获取数据并打印到控制台：

首先，在组件的import部分导入HttpClient模块：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

然后，在组件类中注入HttpClient并发送请求：

@Component({
  selector: 'app - user - list',
  templateUrl: './user - list.component.html',
  styleUrls: ['./user - list.component.css']
})
export class UserListComponent {
  constructor(private http: HttpClient) { }
  ngOnInit() {
    this.http.get('/api/users').subscribe((data: any) => {
      console.log(data);
    });
  }
}

HttpClient模块相比Http模块的优势：
- 类型安全：HttpClient返回的是Observable类型，并且可以指定具体的类型，例如Observable<User[]>，相比Http模块返回的Observable<Response>，在使用时类型更明确，减少运行时类型错误。
- 简化语法：HttpClient的API更加简洁直观，例如get、post等方法直接返回Observable，不需要像Http模块那样手动调用map方法来提取响应体数据。
- 拦截器支持：HttpClient模块支持拦截器，通过拦截器可以全局处理请求和响应，如添加通用的请求头、处理错误等，而Http模块没有内置这样的功能。
- 性能优化：HttpClient在底层做了一些性能优化，例如对请求和响应的处理更加高效，在一定程度上提高了应用的性能。

星途面试题库

面试题：Angular中HttpClient模块如何进行GET请求并处理响应数据

知识考点

面试题答案