传递请求选项出错：Angular中Http与HttpClient使用问题

看起来你在Angular服务里混用了旧的Http模块和新的HttpClient模块，这正是导致两个错误的核心原因，我来一步步帮你理清问题并给出解决方案：

第一个错误：HttpClient不兼容RequestOptions #

你尝试给HttpClient.get()传入旧的RequestOptions对象时出错，是因为**HttpClient（Angular 4.3+引入的新模块）和旧Http模块使用完全不同的请求配置体系**：

• 旧Http用的是@angular/http里的Headers和RequestOptions
• 新HttpClient用的是@angular/common/http里的HttpHeaders，并且不需要封装成RequestOptions，直接传一个包含headers属性的普通对象即可

第二个错误：旧Http不支持泛型参数调用 #

当你改用旧Http的get()方法时，加了<User[]>泛型参数导致报错，是因为旧Http的get()方法本身不接受类型参数，你需要通过map操作符手动把响应数据转换成目标类型。

推荐方案：完全使用HttpClient（旧Http已被废弃） #

这是Angular官方推荐的做法，下面是修正后的完整代码：

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs";
import { User } from "../_models/user.model";

@Injectable()
export class UserService { // 记得给服务起个合适的名字
  private serviceUrl = "apiUrl"; // 替换成你的实际API地址

  constructor(private httpClient: HttpClient) {}

  getUser(): Observable<User[]> {
    // 先做null检查，避免localStorage里没有currentUser时报错
    const currentUser = JSON.parse(localStorage.getItem("currentUser"));
    if (!currentUser?.token) {
      // 根据业务需求处理，比如返回空数组或者抛出错误
      return new Observable<User[]>(observer => observer.next([]));
    }

    // 使用HttpClient对应的HttpHeaders创建请求头
    const headers = new HttpHeaders({
      Authorization: `Bearer ${currentUser.token}`,
      "Content-Type": "application/json"
    });

    // 直接把包含headers的配置对象传给get方法
    return this.httpClient.get<User[]>(this.serviceUrl, { headers });
  }
}

备选方案：如果必须使用旧Http（不推荐） #

如果你因为某些原因还要用旧的Http模块，修正后的代码如下：

import { Injectable } from "@angular/core";
import { Http, Response, Headers, RequestOptions } from "@angular/http";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
import { User } from "../_models/user.model";

@Injectable()
export class UserService {
  private serviceUrl = "apiUrl";

  constructor(private http: Http) {}

  getUser(): Observable<User[]> {
    const currentUser = JSON.parse(localStorage.getItem("currentUser"));
    if (!currentUser?.token) {
      return new Observable<User[]>(observer => observer.next([]));
    }

    const headers = new Headers({
      Authorization: `Bearer ${currentUser.token}`,
      "Content-Type": "application/json"
    });
    const options = new RequestOptions({ headers });

    // 旧Http的get方法不支持泛型，用map转换响应数据类型
    return this.http.get(this.serviceUrl, options)
      .pipe(
        map((response: Response) => response.json() as User[])
      );
  }
}

关键错误总结 #

1. 模块混用：不要同时导入和使用Http（旧）和HttpClient（新）模块的配置类，保持统一
2. 泛型使用错误：旧Http的方法不支持直接传泛型，必须通过map转换类型
3. 空值风险：没有对localStorage.getItem("currentUser")做null检查，容易导致运行时报错

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