rxMethod สำหรับงานอะซิงโครนัส
จัดการโฟลว์แบบอะซิงโครนัสด้วย rxMethod
rxMethod สำหรับงานอะซิงโครนัส เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การทำงานแบบอะซิงโครนัสใน SignalStore
แอ็กชันจำนวนมากทำงานแบบอะซิงโครนัส เช่น การโหลดข้อมูล การค้นหาแบบหน่วงเวลา และการสำรวจข้อมูลเป็นระยะ SignalStore มี rxMethod สำหรับจัดการลำดับการทำงานแบบอะซิงโครนัสที่ตอบสนองและยกเลิกได้
พื้นฐาน rxMethod
rxMethod สร้างเมธอดที่ทำงานบนไปป์ไลน์ของ RxJS คุณเรียกใช้ด้วยค่า (หรือสัญญาณ/Observable) แล้วค่านั้นจะถูกส่งเข้าสู่สตรีม
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { pipe, switchMap, tap } from 'rxjs';
withMethods((store, api = inject(Api)) => ({
load: rxMethod<string>(pipe(
switchMap(id => api.getById(id)),
tap(item => patchState(store, { current: item }))
))
}))การเรียกใช้ rxMethod
เรียกใช้เหมือนเมธอดทั่วไปด้วยค่าธรรมดา ค่านั้นจะเข้าสู่ไปป์ไลน์ที่คุณกำหนด
store.load('42');การส่งสัญญาณ
คุณสามารถส่ง สัญญาณ ให้ rxMethod ได้ โดยไปป์ไลน์จะทำงานซ้ำโดยอัตโนมัติทุกครั้งที่สัญญาณเปลี่ยนแปลง เหมาะอย่างยิ่งสำหรับการโหลดแบบตอบสนอง
selectedId = signal('1');
ngOnInit() {
this.store.load(this.selectedId); // reloads when selectedId changes
}switchMap ยกเลิกงานเก่า
การใช้ switchMap หมายความว่าค่าที่ส่งออกใหม่จะยกเลิกคำขอก่อนหน้าที่ยังทำงานอยู่ วิธีนี้ป้องกันสภาวะแข่งขันที่การตอบกลับเก่าซึ่งล่าช้าเขียนทับค่าที่ใหม่กว่า
การติดตามสถานะการโหลด
ตั้งค่าแฟล็กการโหลดเมื่อเริ่มต้น และล้างค่าเมื่อเสร็จสิ้น เพื่อให้ส่วนติดต่อผู้ใช้แสดงตัวหมุนรอได้
load: rxMethod<string>(pipe(
tap(() => patchState(store, { loading: true })),
switchMap(id => api.getById(id).pipe(
tap(item => patchState(store, { current: item, loading: false }))
))
))การจัดการข้อผิดพลาด
ต้องจัดการข้อผิดพลาดภายในไปป์ไลน์ มิฉะนั้นสตรีมจะเสร็จสิ้นและเมธอดจะหยุดทำงาน ให้ใช้ catchError ภายใน Observable ด้านใน
switchMap(id => api.getById(id).pipe(
tap(item => patchState(store, { current: item, error: null })),
catchError(err => {
patchState(store, { error: err.message, loading: false });
return EMPTY;
})
))การค้นหาแบบหน่วงเวลา
ประกอบตัวดำเนินการตามเวลาเพื่อรองรับการค้นหาขณะพิมพ์ ไปป์ไลน์จะหน่วงเวลาและสลับการทำงานเช่นเดียวกับ RxJS ทั่วไป
search: rxMethod<string>(pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(q => api.search(q)),
tap(results => patchState(store, { results }))
))การเลือกตัวดำเนินการคลี่สตรีม
ใช้ switchMap เพื่อยกเลิกงานเก่า ใช้ concatMap เพื่อเข้าคิว ใช้ mergeMap เพื่อทำงานแบบขนาน และใช้ exhaustMap เพื่อไม่สนใจการเรียกใหม่ขณะกำลังทำงาน เลือกตามระดับการทำงานพร้อมกันที่ต้องการ
การล้างข้อมูลโดยอัตโนมัติ
การสมัครรับไปป์ไลน์จะผูกกับวงจรชีวิตของ store เมื่อ store ถูกทำลาย (ในกรณีที่มีขอบเขตระดับคอมโพเนนต์) สตรีมจะถูกยกเลิก จึงไม่มีการรั่วไหลและไม่ต้องยกเลิกการสมัครรับด้วยตนเอง
การเริ่มต้นเมื่อสร้าง
รวม rxMethod กับฟีเจอร์ withHooks เพื่อเรียกการโหลดเริ่มต้นเมื่อสร้าง store
withHooks({
onInit(store) { store.load('initial'); }
})ตรวจสอบความเข้าใจอย่างรวดเร็ว
ตรวจสอบความรู้เกี่ยวกับ rxMethod
สรุปทบทวน
คุณใช้ rxMethod สำหรับลำดับการทำงานแบบอะซิงโครนัส: เรียกใช้ด้วยค่าหรือสัญญาณ เลือกตัวดำเนินการคลี่สตรีม (switchMap เพื่อยกเลิกงานเก่า) ติดตามการโหลด จัดการข้อผิดพลาดด้วย catchError และอาศัยการล้างการสมัครรับโดยอัตโนมัติ
คำถามที่พบบ่อย
บทเรียน “rxMethod สำหรับงานอะซิงโครนัส” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “rxMethod สำหรับงานอะซิงโครนัส” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “rxMethod สำหรับงานอะซิงโครนัส”
จัดการโฟลว์แบบอะซิงโครนัสด้วย rxMethod คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “rxMethod สำหรับงานอะซิงโครนัส” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การสร้าง SignalStore
- Computed และเมธอด
- rxMethod สำหรับงานอะซิงโครนัส
- เอนทิตีและฟีเจอร์กำหนดเอง