如何将请求头生成逻辑整合进路由生成方法以简化HTTP请求代码

你当前的写法不符合JavaScript语法规则，逗号运算符会丢弃前面的返回值，仅返回最后一个generateHeaders()的结果，无法实现同时传递路由和请求头的需求，可选择以下两种方案实现：

方案1：修改工具方法返回元组，满足你当前的改造思路 #

可以调整方法实现，让工具方法返回固定结构的元组，在请求方法内解构使用：

export class RepositoryService {
  constructor(private http: HttpClient, private envUrl: EnvironmentUrlService) { }

  public getData = (route: string) => {
    // 解构获取完整路由和请求头配置
    const [fullUrl, requestOptions] = this.createRequestConfig(route);
    return this.http.get(fullUrl, requestOptions);
  }

  // 合并原来的createCompleteRoute和generateHeaders逻辑，返回元组
  private createRequestConfig = (route: string) => {
    const fullUrl = `${this.envUrl.urlAddress}/${route}`;
    const options = {
      headers: new HttpHeaders({
        "Content-Type": "application/json",
        "Authorization": `Bearer ${localStorage.getItem("token") || ''}`
      })
    };
    // 用as const固定元组类型
    return [fullUrl, options] as const;
  }
}

方案2：Angular生态最佳实践，使用HTTP拦截器统一注入请求头 #

如果你有大量HTTP请求方法，更推荐使用Angular原生的HTTP拦截器全局注入认证头，无需在业务服务中处理头信息：

1. 首先生成JWT拦截器：

ng generate interceptor interceptors/jwt

2. 编写拦截器逻辑：

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

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    const token = localStorage.getItem('token');
    // 存在token时自动注入头信息
    if (token) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`,
          'Content-Type': 'application/json'
        }
      });
    }
    return next.handle(request);
  }
}

3. 在根模块app.module.ts的providers数组中注册拦截器：

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }
]

4. 最终业务服务可以简化为以下形式，所有请求方法无需再单独处理头信息：

export class RepositoryService {
  constructor(private http: HttpClient, private envUrl: EnvironmentUrlService) { }

  public getData = (route: string) => {
    return this.http.get(`${this.envUrl.urlAddress}/${route}`);
  }

  public postData = <T>(route: string, body: T) => {
    return this.http.post(`${this.envUrl.urlAddress}/${route}`, body);
  }

  // put、delete等其他请求方法同理，无需额外传入headers配置
}

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