面试题：Angular的HttpClient模块如何管理不同接口的不同请求头

Question

假设你的Angular项目中有多个不同的API接口，有的接口需要在请求头中携带认证信息，有的需要携带特定的版本信息。请设计一个合理的方式，使用HttpClient模块来管理这些不同接口的不同请求头设置，并简要说明设计思路和关键代码实现。

Answer 1

设计思路

1. 创建一个服务来统一管理API请求，这样可以集中处理不同接口的请求头设置。
2. 利用HttpClient模块的HttpHeaders来设置请求头。
3. 针对不同类型的接口，定义不同的方法在服务中，每个方法根据需求设置特定的请求头。

关键代码实现

1. 创建服务

   import { Injectable } from '@angular/core';
   import { HttpClient, HttpHeaders } from '@angular/common/http';
   
   @Injectable({
     providedIn: 'root'
   })
   export class ApiService {
     constructor(private http: HttpClient) {}
   
     // 带有认证信息的接口请求方法
     private getAuthHeaders(): HttpHeaders {
       return new HttpHeaders({
         'Authorization': 'Bearer your_token'
       });
     }
     authApiCall(url: string) {
       return this.http.get(url, { headers: this.getAuthHeaders() });
     }
   
     // 带有版本信息的接口请求方法
     private getVersionHeaders(): HttpHeaders {
       return new HttpHeaders({
         'Version': '1.0'
       });
     }
     versionApiCall(url: string) {
       return this.http.get(url, { headers: this.getVersionHeaders() });
     }
   }
   

2. 在组件中使用服务

   import { Component } from '@angular/core';
   import { ApiService } from './api.service';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     constructor(private apiService: ApiService) {}
   
     ngOnInit() {
       this.apiService.authApiCall('your_auth_api_url').subscribe(data => {
         console.log(data);
       });
       this.apiService.versionApiCall('your_version_api_url').subscribe(data => {
         console.log(data);
       });
     }
   }