ไปป์ async
สมัครรับข้อมูลในเทมเพลตโดยไม่ต้องเก็บกวาดด้วยตนเอง
ไปป์ async เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
สิ่งที่ไปป์ async ทำ
ไปป์ async จะสมัครรับข้อมูลจาก Observable (หรือ Promise) ในแม่แบบ แสดงค่าล่าสุดที่ส่งออกมา และยกเลิกการสมัครรับข้อมูลโดยอัตโนมัติเมื่อคอมโพเนนต์ถูกทำลาย
การใช้งานพื้นฐาน
ผูก Observable โดยตรงในแม่แบบ แล้วส่งผ่านไปป์ async
@Component({
template: '<p>{{ message$ | async }}</p>'
})
export class HelloComponent {
message$ = of('Hello from RxJS');
}การแสดงออบเจ็กต์ด้วย async
ใช้งานได้กับค่าทุกชนิดที่ส่งออกมา และใช้ร่วมกับไปป์อื่น เช่น json หรือ date ได้
user$ = this.http.get('/api/me');
// template:
// <pre>{{ user$ | async | json }}</pre>หลีกเลี่ยงการสมัครรับข้อมูลหลายครั้ง
การใช้ async แต่ละครั้งจะสร้างการสมัครรับข้อมูลหนึ่งรายการ หากใช้หลายครั้งกับ Observable เดียวกัน จะทำให้เกิดคำขอ HTTP หลายครั้ง ใช้รูปแบบไวยากรณ์ as เพื่อสมัครรับข้อมูลเพียงครั้งเดียว
<!-- one subscription, reused as "user" -->
<div *ngIf="user$ | async as user">
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
</div>ใช้ร่วมกับโฟลว์ควบคุมแบบใหม่
ใน Angular รุ่นใหม่ ให้ใช้ @if ร่วมกับ as เพื่อใช้รูปแบบการสมัครรับข้อมูลเพียงครั้งเดียวแบบเดียวกัน
@if (user$ | async; as user) {
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
}ค่า Null ระหว่างรอ
ก่อนมีค่าครั้งแรกส่งออกมา async จะคืนค่าเป็น null ให้จัดการสถานะกำลังโหลดอย่างชัดเจน
@if (data$ | async; as data) {
<list [items]="data" />
} @else {
<p>Loading...</p>
}ไม่ต้องยกเลิกการสมัครรับข้อมูลเอง
ไปป์จะยกเลิกการสมัครรับข้อมูลเมื่อถูกทำลายโดยอัตโนมัติ ช่วยกำจัดหน่วยความจำรั่วได้ทั้งประเภท นี่จึงเป็นวิธีที่แนะนำสำหรับใช้ Observable ในแม่แบบ
การสลับ Observable
หากการอ้างอิง Observable ที่ผูกไว้เปลี่ยนแปลง ไปป์ async จะยกเลิกการสมัครรับข้อมูลจากตัวเก่าและสมัครรับข้อมูลจากตัวใหม่โดยอัตโนมัติ
search(term: string) {
this.results$ = this.http.get('/api/search?q=' + term);
// async pipe swaps subscriptions for you
}ไปป์ Async กับ BehaviorSubject
การใช้บริการ BehaviorSubject ร่วมกับไปป์ async ช่วยให้ได้ส่วนติดต่อผู้ใช้แบบรีแอกทีฟที่สะอาด โดยไม่ต้องเขียนโค้ดสมัครรับข้อมูลเอง
// service: readonly count$ = this.subject.asObservable();
// template: <span>{{ count$ | async }}</span>ไปป์ Async กับ toSignal
ทั้งสองแบบจัดการการสมัครรับข้อมูลโดยอัตโนมัติ ไปป์ async ทำงานในแม่แบบ ส่วน toSignal() นำค่ามาไว้ในโค้ดคอมโพเนนต์ในรูปสัญญาณ ให้เลือกตามตำแหน่งที่คุณต้องใช้ค่า
import { toSignal } from '@angular/core/rxjs-interop';
user = toSignal(this.http.get('/api/me'));
// template: {{ user()?.name }}สรุปแนวทางปฏิบัติที่ดีที่สุด
ควรใช้ไปป์ async (หรือ toSignal) แทนการสมัครรับข้อมูลด้วยตนเองในคอมโพเนนต์ ใช้ as เพื่อหลีกเลี่ยงการสมัครรับข้อมูลซ้ำ และจัดการสถานะเริ่มต้นที่เป็น null/กำลังโหลดเสมอ
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจเกี่ยวกับไปป์ async ของคุณ
สรุป: ไปป์ Async
ไปป์ async จะสมัครรับข้อมูลในแม่แบบและทำความสะอาดเมื่อถูกทำลาย
- ใช้
as(ร่วมกับ @if หรือ *ngIf) เพื่อสมัครรับข้อมูลเพียงครั้งเดียว - จะคืนค่า null ก่อนมีการส่งค่าครั้งแรก จึงต้องจัดการสถานะกำลังโหลด
- เหมาะกว่าใช้การสมัครรับข้อมูลด้วยตนเองในแม่แบบ
คุณเรียน RxJS Fundamentals จบแล้ว
คำถามที่พบบ่อย
บทเรียน “ไปป์ async” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ไปป์ async” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ไปป์ async”
สมัครรับข้อมูลในเทมเพลตโดยไม่ต้องเก็บกวาดด้วยตนเอง คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “ไปป์ async” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ออบเซอร์เวเบิลและการสมัครรับข้อมูล
- ซับเจกต์และ BehaviorSubject
- การยกเลิกการสมัครและหน่วยความจำรั่ว
- ไปป์ async