Angular 4中如何在POST请求体中发送数据？

嘿，我来帮你搞定Angular 4里POST请求体传数据的问题～你的代码已经有思路了，但有几个小细节可以调整得更规范，也更贴合Angular HttpClient的设计：

先说说你代码里可以优化的点 #

1. 不需要手动调用JSON.stringify：HttpClient的post方法会自动把传入的JavaScript对象序列化为JSON格式，手动转字符串反而可能导致后端接收到的是字符串而非JSON对象。
2. 不用旧的RequestOptions：在Angular 4的HttpClient模块里，请求配置已经简化成直接传入对象，不需要再创建RequestOptions实例。

修正后的完整代码 #

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthenticationService { 
  private authUrl = 'http://localhost:5555/api/auth'; 

  constructor(private http: HttpClient) {}

  login(username: string, password: string) { 
    console.log(username); 
    // 直接构造请求体对象，如果后端要求包裹在`data`字段里，就写成 { data: { username, password } }
    const requestBody = { username: username, password: password }; 
    
    // 创建请求头，Content-Type设为application/json（其实HttpClient默认也会加，但显式声明更清晰）
    const headers = new HttpHeaders({
      'Content-Type': 'application/json'
    }); 

    // 第三个参数传入配置对象，直接放headers即可
    return this.http.post<any>(this.authUrl, requestBody, { headers });
  }
}

更简洁的写法 #

如果你的逻辑不复杂，还可以把headers的创建直接内嵌到请求配置里，让代码更紧凑：

login(username: string, password: string) { 
  return this.http.post<any>(
    this.authUrl,
    { username, password }, // ES6对象简写，等价于 { username: username, password: password }
    { 
      headers: new HttpHeaders({ 'Content-Type': 'application/json' }) 
    }
  );
}

额外注意 #

如果后端接口要求请求体必须是{ data: { username: '', password: '' } }这种嵌套结构，那你只需要把requestBody改成：

const requestBody = { data: { username, password } };

同样不需要手动转JSON，HttpClient会帮你处理好序列化和Content-Type的问题。

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