RxJS - อัปเดตล่าสุด

เรากำลังใช้ RxJS เวอร์ชัน 6 ในบทช่วยสอนนี้ RxJS มักใช้เพื่อจัดการกับการเขียนโปรแกรมแบบรีแอคทีฟและใช้บ่อยกว่ากับ Angular, ReactJS Angular 6 โหลด rxjs6 ตามค่าเริ่มต้น

RxJS เวอร์ชัน 5 ได้รับการจัดการที่แตกต่างกันเมื่อเทียบกับเวอร์ชัน 6 โค้ดจะแตกในกรณีที่คุณอัปเดต RxJS 5 เป็น 6 ของคุณในบทนี้เราจะเห็นความแตกต่างในวิธีการจัดการการอัปเดตเวอร์ชัน

ในกรณีที่คุณกำลังอัปเดต RxJS เป็น 6 และไม่ต้องการเปลี่ยนแปลงรหัสคุณสามารถทำได้เช่นกันและจะต้องติดตั้งแพ็คเกจต่อไปนี้

npm install --save-dev rxjs-compact

แพคเกจนี้จะดูแลความเข้ากันได้แบบย้อนหลังและรหัสเก่าจะทำงานได้ดีกับ RxJS เวอร์ชัน 6 หากคุณต้องการเปลี่ยนแปลงโค้ดที่ทำงานได้ดีกับ RxJS 6 นี่คือการเปลี่ยนแปลงที่ต้องทำ

แพคเกจสำหรับผู้ปฏิบัติงานสิ่งที่สังเกตได้หัวเรื่องได้รับการปรับโครงสร้างใหม่ดังนั้นการเปลี่ยนแปลงที่สำคัญจึงเกิดขึ้นสำหรับการนำเข้าและมีการอธิบายไว้ด้านล่าง

นำเข้าสำหรับตัวดำเนินการ

ตามเวอร์ชัน 5 สำหรับตัวดำเนินการควรรวมคำสั่งนำเข้าต่อไปนี้ -

import 'rxjs/add/operator/mapTo'
import 'rxjs/add/operator/take'
import 'rxjs/add/operator/tap'
import 'rxjs/add/operator/map'

ใน RxJS เวอร์ชัน 6 การนำเข้าจะเป็นดังนี้ -

import {mapTo, take, tap, map} from "rxjs/operators"

การนำเข้าวิธีการสร้าง Observables

ตามเวอร์ชัน 5 ในขณะที่ทำงานกับ Observables ควรรวมวิธีการนำเข้าต่อไปนี้ -

import "rxjs/add/observable/from";
import "rxjs/add/observable/of";
import "rxjs/add/observable/fromEvent";
import "rxjs/add/observable/interval";

ใน RxJS เวอร์ชัน 6 การนำเข้าจะเป็นดังนี้ -

import {from, of, fromEvent, interval} from 'rxjs';

การนำเข้า Observables

ใน RxJS เวอร์ชัน 5 ในขณะที่ทำงานกับ Observables ควรรวมคำสั่งการนำเข้าต่อไปนี้ -

import { Observable } from 'rxjs/Observable'

ใน RxJS เวอร์ชัน 6 การนำเข้าจะเป็นดังนี้ -

import { Observable } from 'rxjs'

การนำเข้าหัวเรื่อง

ใน RxJS เวอร์ชัน 5 ควรมีหัวเรื่องดังนี้ -

import { Subject} from 'rxjs/Subject'

ใน RxJS เวอร์ชัน 6 การนำเข้าจะเป็นดังนี้ -

import { Subject } from 'rxjs'

จะใช้ตัวดำเนินการใน RxJS 6 ได้อย่างไร?

pipe() methodมีอยู่ในสิ่งที่สังเกตได้ที่สร้างขึ้น เพิ่มลงใน RxJS จากเวอร์ชัน 5.5 การใช้ไปป์ () ตอนนี้คุณสามารถทำงานกับตัวดำเนินการหลายตัวร่วมกันตามลำดับได้ นี่คือวิธีใช้ตัวดำเนินการใน RxJS เวอร์ชัน 5

ตัวอย่าง

import "rxjs/add/observable/from";
import 'rxjs/add/operator/max'

let list1 = [1, 6, 15, 10, 58, 2, 40];
from(list1).max((a,b)=>a-b).subscribe(x => console.log("The Max value is "+x));

ตั้งแต่ RxJS เวอร์ชัน 5.5 เป็นต้นไปเราต้องใช้ pipe () เพื่อดำเนินการตัวดำเนินการ -

ตัวอย่าง

import { from } from 'rxjs';
import { max } from 'rxjs/operators';

from(list1).pipe(max((a,b)=>a-b)).subscribe(x => console.log(
   "The Max value is "+x)
);

เปลี่ยนชื่อโอเปอเรเตอร์

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

ตัวดำเนินการ	เปลี่ยนชื่อเป็น
ทำ()	แตะ ()
จับ()	catchError ()
สวิตซ์()	สวิตช์ทั้งหมด ()
ในที่สุด ()	จบ ()
โยน()	throwError ()