ตัวดำเนินการแปลงข้อมูล
ใช้ map, switchMap, mergeMap และ concatMap
ตัวดำเนินการแปลงข้อมูล เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
โอเปอเรเตอร์คืออะไร
โอเปอเรเตอร์คือฟังก์ชันที่นำมาประกอบกันภายใน .pipe() เพื่อแปลงกระแส โอเปอเรเตอร์สำหรับการแปลงจะเปลี่ยนค่าแต่ละค่าที่ส่งออกมา หรือคลี่ Observable ภายในให้เป็นผลลัพธ์
map
map จะแปลงค่าที่ส่งออกมาแต่ละค่า คล้ายกับ Array.map แต่ทำงานไปตามเวลา
import { of, map } from 'rxjs';
of(1, 2, 3).pipe(
map(n => n * 10)
).subscribe(v => console.log(v)); // 10, 20, 30เหตุผลที่ต้องใช้การแมปหลายระดับ
เมื่อค่าแต่ละค่ากระตุ้นให้เกิด Observable อีกตัว (เช่น การเรียก HTTP) คุณจะได้ Observable ที่มี Observable ซ้อนอยู่ โอเปอเรเตอร์สำหรับคลี่กระแส (switchMap, mergeMap, concatMap) จะสมัครรับข้อมูลจากตัวภายในและส่งค่าของมันออกมา
switchMap
switchMap ยกเลิก Observable ภายในตัวก่อนหน้าเมื่อมีค่าใหม่เข้ามา เหมาะอย่างยิ่งสำหรับการค้นหาแบบพิมพ์ไปค้นหาไป เพราะคำขอเก่าจะถูกทิ้ง
import { switchMap } from 'rxjs';
searchTerm$.pipe(
switchMap(term => this.http.get('/api/search?q=' + term))
).subscribe(results => console.log(results));mergeMap
mergeMap (ชื่ออื่นคือ flatMap) ทำให้ Observable ภายในทำงานพร้อมกันและรวมค่าที่ส่งออกมาทั้งหมด โดยไม่มีการยกเลิก
import { mergeMap } from 'rxjs';
ids$.pipe(
mergeMap(id => this.http.get('/api/item/' + id))
).subscribe(item => console.log(item));
// all requests run in parallelconcatMap
concatMap จะเข้าคิว Observable ภายในและทำงานทีละตัวตามลำดับ โดยรอให้แต่ละตัวจบการทำงานก่อน ใช้เมื่อจำเป็นต้องรักษาลำดับ
import { concatMap } from 'rxjs';
saveQueue$.pipe(
concatMap(payload => this.http.post('/api/save', payload))
).subscribe();
// requests run sequentially, in orderexhaustMap
exhaustMap จะละเลยค่าใหม่ขณะที่ Observable ภายในยังทำงานอยู่ เหมาะอย่างยิ่งสำหรับป้องกันการส่งแบบฟอร์มซ้ำจากการคลิกปุ่ม
import { exhaustMap } from 'rxjs';
submitClicks$.pipe(
exhaustMap(() => this.http.post('/api/login', creds))
).subscribe();
// extra clicks ignored until request finishesการเลือกตัวคลี่กระแสที่เหมาะสม
switchMap: ยกเลิกตัวก่อนหน้า (การค้นหา)
mergeMap: ทำงานพร้อมกันทั้งหมด (การเขียนข้อมูลที่เป็นอิสระต่อกัน)
concatMap: เป็นลำดับ ทีละรายการ (การบันทึกต่อเนื่อง)
exhaustMap: ละเลยขณะกำลังทำงาน (ปุ่มเข้าสู่ระบบ)
switchMap กับการยกเลิก
เนื่องจาก switchMap ยกเลิก Observable ภายในที่กำลังทำงานอยู่ จึงยกเลิกการสมัครรับข้อมูลจากคำขอ HTTP ที่อยู่เบื้องหลังด้วย Angular จะแปลงการยกเลิกนี้เป็นคำขอที่ถูกยกเลิก ช่วยประหยัดแบนด์วิดท์
การใช้ map ร่วมกับตัวคลี่กระแส
คุณมักใช้ map เพื่อดึงข้อมูลออกมาหลังจากคลี่กระแสแล้ว
searchTerm$.pipe(
switchMap(term => this.http.get('/api/search?q=' + term)),
map(res => res.items)
).subscribe(items => console.log(items));หลีกเลี่ยงการสมัครรับข้อมูลซ้อนกัน
อย่าสมัครรับข้อมูลภายในการสมัครรับข้อมูล ใช้โอเปอเรเตอร์สำหรับคลี่กระแสแทน เพราะช่วยให้ไปป์ไลน์เป็นแบบประกาศและจัดการการทำความสะอาดได้อย่างถูกต้อง
// BAD:
// outer$.subscribe(v => inner$(v).subscribe(...));
// GOOD:
// outer$.pipe(switchMap(v => inner$(v))).subscribe(...);ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจเกี่ยวกับตัวดำเนินการแปลงค่า
ทบทวน: ตัวดำเนินการแปลงค่า
map แปลงค่า ส่วนตัวดำเนินการคลี่ค่าจะจัดการออบเซอร์เวเบิลภายใน
switchMap: ยกเลิกตัวก่อนหน้าmergeMap: ทำงานแบบขนานconcatMap: ทำงานตามลำดับและเรียงลำดับexhaustMap: ไม่สนใจค่าใหม่ขณะกำลังทำงาน
ถัดไป: ตัวดำเนินการกรอง
คำถามที่พบบ่อย
บทเรียน “ตัวดำเนินการแปลงข้อมูล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตัวดำเนินการแปลงข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตัวดำเนินการแปลงข้อมูล”
ใช้ map, switchMap, mergeMap และ concatMap คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “ตัวดำเนินการแปลงข้อมูล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ตัวดำเนินการแปลงข้อมูล
- ตัวดำเนินการกรองข้อมูล
- ตัวดำเนินการรวมข้อมูล
- ตัวดำเนินการจัดการข้อผิดพลาด