Angular Academy · บทเรียน

ตัวดำเนินการรวมข้อมูล

รวมสตรีมด้วย combineLatest และ forkJoin

บทเรียน 3 จาก 413 ขั้นตอน

ตัวดำเนินการรวมข้อมูล เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องรวมสตรีม

แอปจริงต้องประสานแหล่งข้อมูลแบบอะซิงโครนัสหลายแหล่ง เช่น การเรียก HTTP หลายครั้ง ค่าแบบฟอร์มร่วมกับตัวกรอง หรือการคลิกร่วมกับสถานะล่าสุด ตัวดำเนินการรวมค่าจะรวมออบเซอร์เวเบิลหลายตัวให้เป็นหนึ่งเดียว

combineLatest

combineLatest จะส่งอาร์เรย์ของค่าล่าสุดจากแต่ละแหล่งออกมาเมื่อแหล่งใด ๆ ส่งค่า โดยจะเริ่มทำงานหลังจากทุกแหล่งส่งค่าอย่างน้อยหนึ่งครั้งแล้ว

import { combineLatest } from 'rxjs';

combineLatest([name$, age$]).subscribe(
  ([name, age]) => console.log(name, age)
);
// re-emits whenever name$ OR age$ changes

กรณีใช้งาน combineLatest

เหมาะอย่างยิ่งสำหรับสถานะส่วนติดต่อผู้ใช้ที่คำนวณขึ้นมา เช่น รวมคำค้นหากับตัวกรองหมวดหมู่เพื่อสร้างคำค้น

combineLatest([term$, category$]).pipe(
  switchMap(([term, cat]) =>
    this.http.get('/api?q=' + term + '&cat=' + cat))
).subscribe(results => console.log(results));

forkJoin

forkJoin จะรอให้แหล่งข้อมูล ทั้งหมด เสร็จสิ้น แล้วจึงส่งอาร์เรย์เดียวที่มีค่าสุดท้ายของแต่ละแหล่งออกมา ซึ่งเทียบเท่ากับ Promise.all ใน RxJS

import { forkJoin } from 'rxjs';

forkJoin({
  user: this.http.get('/api/user'),
  posts: this.http.get('/api/posts')
}).subscribe(({ user, posts }) => {
  console.log(user, posts);
});

ข้อควรระวังของ forkJoin

forkJoin จะไม่ส่งค่าใดเลยหากมีแหล่งข้อมูลใดไม่เสร็จสิ้น เช่น ตัวจับช่วงเวลา หรือเกิดข้อผิดพลาดก่อนเสร็จสิ้น ควรใช้กับแหล่งข้อมูลที่มีจุดสิ้นสุด เช่น คำขอ HTTP

merge

merge จะคลี่ออบเซอร์เวเบิลหลายตัวให้เป็นหนึ่งเดียว โดยส่งค่าตามที่มาถึงจากแหล่งใดก็ได้ และไม่จับคู่ค่า

import { merge } from 'rxjs';

merge(clicks$, keypresses$).subscribe(
  event => console.log('event', event)
);
// emits whenever either source emits

zip

zip จะจับคู่ค่าตามดัชนี โดยส่งค่าลำดับที่ 1 ของแต่ละแหล่ง จากนั้นค่าลำดับที่ 2 และต่อไปเรื่อย ๆ โดยจะรอให้ทุกแหล่งสร้างค่าถัดไป

import { zip, of } from 'rxjs';

zip(of(1, 2, 3), of('a', 'b', 'c'))
  .subscribe(([n, l]) => console.log(n, l));
// [1,a], [2,b], [3,c]

startWith

startWith จะเติมค่าเริ่มต้นไว้ด้านหน้า ซึ่งมีประโยชน์เพื่อให้ combineLatest ส่งค่าได้ก่อนที่ทุกแหล่งจะส่งค่า

import { startWith } from 'rxjs';

combineLatest([
  term$.pipe(startWith('')),
  category$.pipe(startWith('all'))
]).subscribe(([t, c]) => console.log(t, c));

withLatestFrom

withLatestFrom จะส่งค่าเฉพาะเมื่อ แหล่งข้อมูลหลัก ส่งค่า โดยแนบค่าล่าสุดจากออบเซอร์เวเบิลอื่น ๆ มาด้วย แหล่งข้อมูลหลักเป็นตัวขับเคลื่อน ส่วนแหล่งอื่นทำหน้าที่แบบพาสซีฟ

import { withLatestFrom } from 'rxjs';

saveClick$.pipe(
  withLatestFrom(formValue$)
).subscribe(([_, form]) => this.save(form));

concat สำหรับสตรีมตามลำดับ

concat จะสมัครรับข้อมูลจากแต่ละแหล่งตามลำดับ และไปยังแหล่งถัดไปเมื่อแหล่งปัจจุบันเสร็จสิ้นเท่านั้น ใช้เมื่อต้องการให้สตรีมทำงานทีละตัวอย่างเคร่งครัด

import { concat, of } from 'rxjs';

concat(of(1, 2), of(3, 4))
  .subscribe(v => console.log(v));
// 1, 2, 3, 4 (second starts after first completes)

combineLatest กับ forkJoin กับ zip

combineLatest: ค่าล่าสุดของแต่ละแหล่งเมื่อมีแหล่งใดส่งค่า
forkJoin: ค่าสุดท้ายของแต่ละแหล่งครั้งเดียวเมื่อทุกแหล่งเสร็จสิ้น
zip: จับคู่ตามดัชนี
เลือกใช้ตามว่าต้องการการอัปเดตต่อเนื่อง การรวมครั้งเดียว หรือการจับคู่แบบเคร่งครัด

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเกี่ยวกับตัวดำเนินการรวมค่า

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน: ตัวดำเนินการรวมค่า

ตัวดำเนินการรวมค่าช่วยประสานสตรีมหลายตัว

combineLatest: ค่าล่าสุดของแต่ละแหล่งเมื่อมีการส่งค่าใด ๆ
forkJoin: รวมเมื่อเสร็จสิ้น (ลักษณะคล้าย Promise.all)
merge: สอดแทรกค่าที่ส่งออกมาทั้งหมด
withLatestFrom: ภาพสถานะล่าสุดของแหล่งอื่นโดยมีแหล่งหลักเป็นตัวขับเคลื่อน

ถัดไป: ตัวดำเนินการจัดการข้อผิดพลาด

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 38
บทเรียน: 144

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “ตัวดำเนินการรวมข้อมูล” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตัวดำเนินการรวมข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตัวดำเนินการรวมข้อมูล”

รวมสตรีมด้วย combineLatest และ forkJoin คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “ตัวดำเนินการรวมข้อมูล” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Angular Academy