面试题：Angular生产版本构建下如何针对不同环境优化HTTP请求

1. 使用不同的 API 端点

环境配置文件：在Angular项目中，通常使用environment.ts和environment.prod.ts文件来区分开发和生产环境。可以在这些文件中定义不同的API端点。例如：

// environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

// environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://your-production-server.com/api'
};

使用配置：在服务中注入environment对象，根据环境选择相应的API端点。例如在一个数据服务中：

import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get(`${environment.apiUrl}/data`);
  }
}

2. 配置请求拦截器处理认证和请求头设置

创建拦截器：创建一个实现HttpInterceptor接口的类。例如，处理认证头：

import { Injectable } from '@angular/core';
import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../environments/environment';

@Injectable()
export class AuthInterceptorService implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    let authReq = req;
    if (environment.production) {
      // 在生产环境添加特定认证头
      authReq = req.clone({
        headers: req.headers.set('Authorization', 'Bearer your-production-token')
      });
    } else {
      // 在开发环境添加特定认证头
      authReq = req.clone({
        headers: req.headers.set('Authorization', 'Bearer your-development-token')
      });
    }
    return next.handle(authReq);
  }
}

注册拦截器：在app.module.ts中注册拦截器：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AuthInterceptorService } from './auth - interceptor.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. 在构建过程中进行相应的配置

使用Angular CLI：Angular CLI提供了方便的构建命令来处理不同环境。例如，构建生产版本：

ng build --prod

这个命令会自动使用environment.prod.ts中的配置。如果需要自定义构建环境，可以创建额外的环境配置文件，如environment.test.ts，并使用--configuration参数指定：

ng build --configuration=test

自定义构建脚本：如果默认的Angular CLI构建不满足需求，可以编写自定义的构建脚本。例如，使用webpack进行更细粒度的控制。首先安装@angular - cli - webpack，然后在angular.json中配置使用webpack：

{
  "architect": {
    "builder": "@angular - cli - webpack:browser",
    "options": {
      // 原有的选项...
    },
    "configurations": {
      "production": {
        // 生产环境配置...
      },
      "test": {
        // 测试环境配置...
      }
    }
  }
}

通过自定义webpack配置，可以进一步优化不同环境下的HTTP请求配置等。

星途面试题库

面试题：Angular生产版本构建下如何针对不同环境优化HTTP请求

知识考点

面试题答案

1. 使用不同的 API 端点

2. 配置请求拦截器处理认证和请求头设置

3. 在构建过程中进行相应的配置