ไคลเอ็นต์ HTTP ใน Angular

บทเรียนนี้ครอบคลุมการใช้ไคลเอ็นต์ HTTP ของ Angular เพื่อสื่อสารกับ API ทำให้คุณดึงและส่งข้อมูลได้อย่างง่ายดาย

ไคลเอ็นต์ HTTP คืออะไร

ไคลเอ็นต์ HTTP คือโมดูลในตัวของ Angular สำหรับสื่อสารกับบริการแบ็กเอนด์ผ่านคำขอ HTTP

การนำเข้า HttpClientModule

นำเข้า HttpClientModule ในโมดูลแอปพลิเคชันของคุณเพื่อเริ่มใช้คำขอ HTTP:

import { HttpClientModule } from '@angular/common/http';

การส่งคำขอ GET

ใช้ไคลเอ็นต์ HTTP เพื่อดึงข้อมูลจากจุดปลายทางของ API:

this.http.get('https://api.example.com/data').subscribe(data => console.log(data));

การจัดการข้อมูลตอบกลับ

ไคลเอ็นต์ HTTP จะส่งคืน Observables ให้สมัครรับข้อมูลเหล่านี้เพื่อจัดการข้อมูลแบบอะซิงโครนัส:

this.http.get('api/data').subscribe(response => this.data = response);

คำขอ POST เพื่อส่งข้อมูล

ส่งข้อมูลไปยังเซิร์ฟเวอร์โดยใช้คำขอ POST:

this.http.post('api/items', newItem).subscribe(result => console.log(result));

การจัดการข้อผิดพลาด

จัดการข้อผิดพลาดจากคำขอ HTTP โดยใช้ตัวดำเนินการ catchError:

this.http.get('api/data').pipe(catchError(error => of('Error occurred'))).subscribe();

การใช้ส่วนหัว

เพิ่มส่วนหัวให้คำขอ HTTP เพื่อส่งข้อมูลเพิ่มเติม:

const headers = new HttpHeaders().set('Authorization', 'my-auth-token');

สรุป

คุณเรียนรู้การใช้ไคลเอ็นต์ HTTP ของ Angular เพื่อดึงและส่งข้อมูลกับ API ได้อย่างมีประสิทธิภาพแล้ว เดินหน้าต่อไปนะครับ/ค่ะ!