Angular 5中RequestOptions已废弃报错，请求代码修改方案

安全阿岳

2026-5-28

嘿，我来帮你搞定这个Angular版本升级的问题！你遇到的RequestOptions废弃报错是因为Angular 5里的新HttpClient模块（就是你已经导入的@angular/common/http）彻底抛弃了旧@angular/http里的RequestOptions类，改用更简洁的请求配置方式，还有个容易踩的坑——HttpHeaders是不可变对象，你原来的append写法其实不会生效。

下面是修改后的完整代码，我给你标注了关键修改点：

import { Injectable } from '@angular/core';
// 移除旧的RequestOptions导入，新HttpClient不需要它
import { User } from '../model/model.user';
import 'rxjs/add/operator/map';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable()
export class AuthService {
  constructor(public http: HttpClient) { }

  public logIn(user: User) {
    // 直接在HttpHeaders构造函数中传入所有头信息（最简洁的方式）
    const headers = new HttpHeaders({
      'Accept': 'application/json',
      'Authorization': 'Basic ' + btoa(user.username + ':' + user.password)
    });

    // 替代RequestOptions：创建HttpClient要求的普通配置对象
    const httpOptions = {
      headers: headers
    };

    // HttpClient自动解析JSON响应，无需手动调用resp.json()
    return this.http.get('http://localhost:8081/account/login', httpOptions)
      .map(resp => {
        const user = resp.principal;
        if (user) {
          localStorage.setItem('currentUser', JSON.stringify(user));
        }
        return user; // 建议返回用户对象，方便组件端后续处理
      });
  }

  logOut() {
    // 给POST请求添加上规范的Content-Type头
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    
    return this.http.post('http://localhost:8081/logout', {}, { headers: headers })
      .map(() => {
        localStorage.removeItem('currentUser');
      });
  }
}

再给你拆解几个核心修改点：

移除旧依赖：删掉@angular/http的RequestOptions导入，新HttpClient完全不依赖旧模块的这个类。
HttpHeaders的正确用法：因为HttpHeaders是不可变的，你原来直接调用headers.append()不会修改原对象，必须重新赋值（比如headers = headers.append(...)），或者像上面这样直接在构造函数里一次性传入所有头信息，更高效。
替换RequestOptions：HttpClient的请求方法（get/post等）接受的第二个参数是一个普通配置对象，直接把headers放进这个对象里就行，结构更清晰。
简化响应处理：新HttpClient默认会将JSON响应解析为JavaScript对象，所以不用再写resp.json()，直接访问属性即可。

这样修改后，你应该就不会再看到RequestOptions的废弃警告了，代码也完全符合Angular 5的规范。

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