RxJS - การทำงานกับหัวเรื่อง

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

เราจะพูดถึงหัวข้อต่อไปนี้ในบทนี้ -

  • สร้างหัวเรื่อง
  • อะไรคือความแตกต่างระหว่าง Observable และ Subject?
  • เรื่องพฤติกรรม
  • เล่นซ้ำเรื่อง
  • AsyncSubject

สร้างหัวเรื่อง

ในการทำงานกับหัวเรื่องเราจำเป็นต้องนำเข้าหัวเรื่องตามที่แสดงด้านล่าง -

import { Subject } from 'rxjs';

คุณสามารถสร้างวัตถุหัวเรื่องได้ดังนี้ -

const subject_test = new Subject();

วัตถุคือผู้สังเกตการณ์ซึ่งมีสามวิธี -

  • next(v)
  • error(e)
  • complete()

สมัครรับเรื่อง

คุณสามารถสร้างการสมัครสมาชิกได้หลายหัวข้อตามที่แสดงด้านล่าง -

subject_test.subscribe({
   next: (v) => console.log(`From Subject : ${v}`)
});
subject_test.subscribe({
   next: (v) => console.log(`From Subject: ${v}`)
});

การสมัครสมาชิกจะลงทะเบียนกับวัตถุหัวเรื่องเช่นเดียวกับ addlistener ที่เราพูดถึงก่อนหน้านี้

การส่งผ่านข้อมูลไปยังหัวเรื่อง

คุณสามารถส่งข้อมูลไปยังเรื่องที่สร้างขึ้นโดยใช้วิธีการ () ถัดไป

subject_test.next("A");

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

ตัวอย่าง

นี่คือตัวอย่างการทำงานของหัวเรื่อง -

import { Subject } from 'rxjs';

const subject_test = new Subject();

subject_test.subscribe({
   next: (v) => console.log(`From Subject : ${v}`)
});
subject_test.subscribe({
   next: (v) => console.log(`From Subject: ${v}`)
});
subject_test.next("A");
subject_test.next("B");

วัตถุ subject_test ถูกสร้างขึ้นโดยเรียก Subject () ใหม่ อ็อบเจ็กต์ subject_test มีการอ้างอิงไปยังเมธอด next (), error () และ complete () ผลลัพธ์ของตัวอย่างข้างต้นแสดงไว้ด้านล่าง -

เอาต์พุต

เราสามารถใช้วิธี complete () เพื่อหยุดการทำงานของหัวเรื่องดังที่แสดงด้านล่าง

ตัวอย่าง

import { Subject } from 'rxjs';

const subject_test = new Subject();

subject_test.subscribe({
   next: (v) => console.log(`From Subject : ${v}`)
});
subject_test.subscribe({
   next: (v) => console.log(`From Subject: ${v}`)
});
subject_test.next("A");
subject_test.complete();
subject_test.next("B");

เมื่อเราเรียกเสร็จสิ้นจะไม่มีการเรียกใช้วิธีการถัดไปที่เรียกในภายหลัง

เอาต์พุต

ตอนนี้ให้เราดูวิธีการเรียก error () วิธี

ตัวอย่าง

ด้านล่างนี้เป็นตัวอย่างการทำงาน -

import { Subject } from 'rxjs';

const subject_test = new Subject();

subject_test.subscribe({
   error: (e) => console.log(`From Subject : ${e}`)
});
subject_test.subscribe({
   error: (e) => console.log(`From Subject : ${e}`)
});
subject_test.error(new Error("There is an error"));

เอาต์พุต

อะไรคือความแตกต่างระหว่าง Observable และ Subject?

สิ่งที่สังเกตได้จะพูดคุยแบบตัวต่อตัวกับผู้สมัครสมาชิก เมื่อใดก็ตามที่คุณสมัครรับข้อมูลที่สังเกตได้การดำเนินการจะเริ่มตั้งแต่ต้น รับสาย Http โดยใช้ ajax และสมาชิก 2 คนโทรไปที่สังเกตได้ คุณจะเห็นคำขอ HttpHttp 2 รายการในแท็บเครือข่ายเบราว์เซอร์

ตัวอย่าง

นี่คือตัวอย่างการทำงานที่เหมือนกัน -

import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';

let final_val = ajax('https://jsonplaceholder.typicode.com/users').pipe(map(e => e.response));
let subscriber1 = final_val.subscribe(a => console.log(a));
let subscriber2 = final_val.subscribe(a => console.log(a));

เอาต์พุต

ตอนนี้ปัญหาคือเราต้องการแชร์ข้อมูลเดียวกัน แต่ไม่ต้องเสียค่าโทร Http 2 ครั้ง เราต้องการโทร Http หนึ่งครั้งและแบ่งปันข้อมูลระหว่างสมาชิก

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

ตัวอย่าง

นี่คือตัวอย่างการทำงานโดยใช้หัวเรื่อง -

import { Subject } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';

const subject_test = new Subject();

subject_test.subscribe({
   next: (v) => console.log(v)
});
subject_test.subscribe({
   next: (v) => console.log(v)
});

let final_val = ajax('https://jsonplaceholder.typicode.com/users').pipe(map(e => e.response));
let subscriber = final_val.subscribe(subject_test);

เอาต์พุต

ตอนนี้คุณสามารถเห็นการโทร Http เพียงครั้งเดียวและข้อมูลเดียวกันจะถูกแบ่งปันระหว่างสมาชิกที่เรียกว่า

เรื่องพฤติกรรม

หัวข้อพฤติกรรมจะให้ค่าล่าสุดแก่คุณเมื่อถูกเรียก

คุณสามารถสร้างเรื่องพฤติกรรมได้ดังที่แสดงด้านล่าง -

import { BehaviorSubject } from 'rxjs';
const subject = new BehaviorSubject("Testing Behaviour Subject"); 
// initialized the behaviour subject with value:Testing Behaviour Subject

ตัวอย่าง

นี่คือตัวอย่างการทำงานในการใช้ Behavior Subject -

import { BehaviorSubject } from 'rxjs';
const behavior_subject = new BehaviorSubject("Testing Behaviour Subject"); 
// 0 is the initial value

behavior_subject.subscribe({
   next: (v) => console.log(`observerA: ${v}`)
});

behavior_subject.next("Hello");
behavior_subject.subscribe({
   next: (v) => console.log(`observerB: ${v}`)
});
behavior_subject.next("Last call to Behaviour Subject");

เอาต์พุต

เล่นซ้ำเรื่อง

การเล่นซ้ำจะคล้ายกับเรื่องพฤติกรรมโดยที่มันสามารถบัฟเฟอร์ค่าและเล่นซ้ำกับสมาชิกใหม่ได้

ตัวอย่าง

นี่คือตัวอย่างการทำงานของหัวข้อการเล่นซ้ำ -

import { ReplaySubject } from 'rxjs';
const replay_subject = new ReplaySubject(2); 
// buffer 2 values but new subscribers

replay_subject.subscribe({
   next: (v) => console.log(`Testing Replay Subject A: ${v}`)
});

replay_subject.next(1);
replay_subject.next(2);
replay_subject.next(3);
replay_subject.subscribe({
   next: (v) => console.log(`Testing Replay Subject B: ${v}`)
});

replay_subject.next(5);

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

เอาต์พุต

AsyncSubject

ในกรณีของ AsyncSubject ค่าสุดท้ายที่เรียกจะถูกส่งผ่านไปยังผู้สมัครสมาชิกและจะทำได้หลังจากเรียกใช้เมธอด complete () เท่านั้น

ตัวอย่าง

นี่คือตัวอย่างการทำงานที่เหมือนกัน -

import { AsyncSubject } from 'rxjs';

const async_subject = new AsyncSubject();

async_subject.subscribe({
   next: (v) => console.log(`Testing Async Subject A: ${v}`)
});

async_subject.next(1);
async_subject.next(2);
async_subject.complete();
async_subject.subscribe({
   next: (v) => console.log(`Testing Async Subject B: ${v}`)
});

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

เอาต์พุต