如何在Angular10+中发送请求头与查询参数？旧方法已失效

Angular 4+ 开始就弃用了RequestOptions，现在直接通过HttpClient请求方法的配置对象就能实现请求头和查询参数的传递，无需再创建RequestOptions实例。

修改后的代码实现 #

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';

// 定义数据类型（根据实际业务调整）
interface testData {
  // 示例字段，替换为你的实际数据结构
  id: number;
  name: string;
}

export class YourDataService {
  private url = '你的目标接口地址';

  constructor(private httpClient: HttpClient) {}

  public getData(value: any): Observable<testData[]> {
    // 构建查询参数：添加test参数
    const queryParams = new HttpParams().append('test', value);
    // 构建请求头：设置Content-Type
    const requestHeaders = new HttpHeaders().set('Content-Type', 'application/json');

    // 直接将headers和params作为配置项传入get请求
    return this.httpClient.get<testData[]>(this.url, {
      headers: requestHeaders,
      params: queryParams
    });
  }
}

额外说明 #

• 请求头操作：HttpHeaders的set方法会覆盖同名请求头，若需要添加多个同名头，改用append方法
• 查询参数简化写法：如果参数固定，也可以用对象初始化HttpParams，更简洁：

  const queryParams = new HttpParams({ fromObject: { test: value } });
  

• 多参数传递：链式调用append即可添加多个查询参数：

  const queryParams = new HttpParams()
    .append('test', value)
    .append('page', '1')
    .append('size', '10');
  

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