🖥️ Angular Http Client 使用方式

✏️ 步驟 1

首先，確保您已經將 HttpClientModule 添加到您的模組中。您可以在 app.module.ts 或其他適當的模組中這樣做：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // 引入 HttpClientModule

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // 將 HttpClientModule 添加到 imports 中
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

✏️ 步驟 2

在您的服務或組件中，注入 HttpClient 並使用它發送 HTTP 請求。以下是一個簡單的示例：

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

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  // 發送 GET 請求
  getItems(): Observable<any> {
    return this.http.get<any>('<https://api.example.com/items>');
  }

  // 發送 POST 請求
  createItem(item: any): Observable<any> {
    return this.http.post<any>('<https://api.example.com/items>', item);
  }
}

✏️ 結論

在此範例中，我們創建了一個名為 DataService 的服務，使用 HttpClient 發送了 GET 和 POST 請求。您可以根據您的 API 端點和需求來調整 URL 和請求類型。

請注意，HttpClient 返回的是一個 RxJS 的 Observable。您可以使用 RxJS 的操作符來處理和訂閱這些 Observables，並獲取伺服器的回應數據。

這僅僅是 HttpClient 的基本使用方法。根據您的需求，您可以使用其他功能，如請求參數、請求標頭、錯誤處理等。