📜  将标头添加到 httpclient angular - TypeScript (1)

📅  最后修改于: 2023-12-03 15:25:20.654000             🧑  作者: Mango

在 HttpClient 中加入请求 Header

在 Angular 的 HttpClient 中添加请求 Header 非常简单。我们只需要在 HttpHeaders 对象中设置我们想要添加的 Header,然后将该对象传递给 HttpClient 的 get()post() 方法即可。

下面是一个简单的示例,演示了如何将 Authorization Header 添加到我们的 HTTP 请求中:

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {}

  getUserDetails(): Observable<any> {
    // 定义我们要加入请求 Header 的值
    const httpOptions = {
      headers: new HttpHeaders({
        'Authorization': 'Bearer my-token-value'
      })
    };

    // 使用我们之前定义的 HttpOptions 对象作为参数
    return this.http.get('/api/users/details/', httpOptions);
  }
}

在上述代码中,我们首先定义了一个名为 httpOptions 的对象,该对象包含一个 headers 属性。该 headers 属性是 HttpHeaders 类型的,因此我们可以在其中创建我们想要加入请求 Header 的键值对。

在我们的 getUserDetails() 方法中,我们使用 http.get() 方法来请求 /api/users/details/ 终端点的数据。我们将 httpOptions 对象作为参数传递给该方法,这样我们在请求中加入了我们之前定义的 'Authorization' Header。

总结

在 Angular 的 HttpClient 中添加请求 Header 是非常简单的,只需要使用 HttpHeaders 对象设置我们想要加入的 Header,然后将该对象作为参数传递给 get()post() 方法即可。这样使得我们可以方便地定义任意 HTTP 请求 Header。