HttpClient Module: GET, POST, PUT, DELETE

HttpClient คือ Service ของ Angular สำหรับเรียก HTTP API โดย method เช่น get, post, put, delete จะคืนค่าเป็น Observable เพื่อให้จัดการข้อมูลแบบ asynchronous ได้

Timeline/ประวัติศาสตร์

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
  subgraph Era1["ยุค AJAX / XMLHttpRequest"]
    A["XMLHttpRequest
Callback Based"]
  end
  subgraph Era2["ยุค Fetch / Promise API"]
    B["fetch()
Promise Based"]
  end
  subgraph Era3["ยุค Angular HttpClient / Observable API"]
    C["HttpClient
Observable Based"]
    D["Interceptors
จัดการ Header/Error กลาง"]
  end
  A --> B --> C --> D

ขั้นตอนใช้งาน

  1. เพิ่ม HttpClientModule ใน AppModule imports
  2. Inject HttpClient ด้วย constructor(private http: HttpClient) {}
  3. เรียก http.get<User[]>('/api/users')
  4. ส่งข้อมูลด้วย http.post<User>('/api/users', body)
  5. อัปเดตข้อมูลด้วย http.put('/api/users/1', body)
  6. ลบข้อมูลด้วย http.delete('/api/users/1')

Header และ Query Parameters

ตาราง CRUD

Method HttpClient หน้าที่ ตัวอย่าง Endpoint
GET http.get<T>() ดึงข้อมูล /api/users
POST http.post<T>() สร้างข้อมูล /api/users
PUT http.put<T>() อัปเดตข้อมูลเต็ม /api/users/1
PATCH http.patch<T>() อัปเดตบางส่วน /api/users/1
DELETE http.delete<T>() ลบข้อมูล /api/users/1

Mermaid Diagram: Request/Response

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
  A["Component
หน้าจอ"] --> B["UserService
เรียก API"]
  B --> C["HttpClient
HTTP Request"]
  C --> D["REST API
Server"]
  D --> E["JSON Response
ข้อมูลตอบกลับ"]
  E --> B --> A

สมการคณิตศาสตร์: จำนวน Request รวม

R = Rget + Rpost + Rput + Rdelete

Code Example

// user-api.service.ts
// Service สำหรับเรียก REST API ด้วย HttpClient
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface User {
  id: number;
  name: string;
  email: string;
}

@Injectable({ providedIn: 'root' })
export class UserApiService {
  private apiUrl = '/api/users';

  constructor(private http: HttpClient) {}

  getUsers(page = 1): Observable<User[]> {
    const params = new HttpParams().set('page', page);
    return this.http.get<User[]>(this.apiUrl, { params });
  }

  createUser(body: Omit<User, 'id'>): Observable<User> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post<User>(this.apiUrl, body, { headers });
  }

  updateUser(id: number, body: Partial<User>): Observable<User> {
    return this.http.put<User>(`${this.apiUrl}/${id}`, body);
  }

  deleteUser(id: number): Observable<void> {
    return this.http.delete<void>(`${this.apiUrl}/${id}`);
  }
}

// ตัวอย่างการใช้งาน:
// this.userApi.getUsers().subscribe(users => this.users = users);

กิจกรรมท้ายบท

กลับสัปดาห์ที่ 8