Rxjs Là Gì

Rxjs là gì

Rxjs hoặc Reactive Extension dành cho javascript là một thư viện để làm việc với mẫu Reactive của Observables và Observer được sử dụng rộng rãi để xử lý luồng dữ liệu liên tục phát ra dữ liệu cho trình quan sát phản ứng theo các sự kiện và thay đổi này.

Bạn đang xem: Rxjs là gì

Chủ yếu làm việc với mã đồng bộ / không đồng bộ trên javascript.

Rxjs là một cổng thông tin mẫu có sẵn cho các ngôn ngữ khác (C ++, Java…).

Tại sao sử dụng Rxjs

Theo ý kiến ​​của tôi, bất kỳ nhà phát triển nào muốn làm việc và thao tác với dòng và chuỗi dữ liệu nên cân nhắc việc học Rxjs, đặc biệt là đối với các nhà phát triển javascript vì Rxjs là một công nghệ hot và rất nhiều công ty và nhóm đang tuyển dụng với yêu cầu như vậy để đạt được công việc nhà phát triển web.

Dưới đây là một số điểm tôi thấy đúng sau khi sử dụng Rxjs một thời gian:

Chạy cả mã đồng bộ và không đồng bộ Các đối tượng lặp lại và Promise có thể được sử dụng như trong Rxjs Phát ra nhiều sự kiện theo thời gian Một tập hợp lớn các toán tử để làm việc với các kiểu dữ liệu chuẩn Quan sát mọi đối tượng và phản ứng khi có thay đổi

Và Tài liệu chính thức cho Rxjs cho javascript rxjs.dev

Rxjs có thể quan sát được

Một đối tượng có thể quan sát là một loại đối tượng đặc biệt phát ra một chuỗi các sự kiện theo thời gian, nó đại diện cho một luồng dữ liệu mà luồng dữ liệu kết thúc với trạng thái hoàn thành hoặc lỗi hoặc một trong số chúng khi được phát ra, nó kết thúc vòng đời của đối tượng có thể quan sát và trở nên vô dụng.

Đối với mỗi Observable phải có một trình quan sát, về cơ bản (các) lệnh gọi lại được thực thi khi có thể quan sát phát ra một giá trị mới và một lệnh gọi lại hoàn chỉnh và lỗi để phản ứng với trạng thái hoàn chỉnh hoặc trạng thái lỗi.

Theo mặc định, các Observables là nguội có nghĩa là chúng sẽ không chạy cho đến khi bạn đăng ký (đăng ký) ít nhất một người quan sát vào nó để nó có thể bắt đầu nhận một chuỗi dữ liệu từ Observable.

Khi bạn làm việc với Rxjs hầu hết thời gian, bạn sẽ tạo (tạo) các giá trị quan sát thông qua sự trợ giúp của các toán tử có thể tạo ra một có thể quan sát cho một hoạt động cụ thể, ví dụ, tạo ra tất cả các giá trị mảng lần lượt bằng cách sử dụng từ toán tử.

Dưới đây là sơ đồ cho thấy cách một Observable hoạt động với nhiều chi tiết hơn.


*

Hãy tạo Observable đầu tiên của chúng ta, tôi sẽ sử dụng một ứng dụng Nodejs cơ bản mà Rxjs cũng hoạt động trên Browser.

const rxjs = require("rxjs");//Create an Observable instance const myObservable = new rxjs.Observable(subscriber => { //TODO: You can Fetch data from the Server API //Emit a value(s) subscriber.next("Hello"); subscriber.next("Hello"); subscriber.next(15); subscriber.next({ id: 1 }); //Finish Execution Successfully subscriber.complete() //Or you can call error if there are any errors //subscriber.error("Err, No one should use Jquery!");});

Như tôi đã nói với bạn trước đây, Các quan sát đang LẠNH nên chúng sẽ không chạy, cho đến khi chúng tôi đăng ký ít nhất một người quan sát vào nó.

//We subscribe to myObservable and that"s what an observer looks like myObservable.subscribe( v => console.log("Next: ", v), err => console.error(err), () => console.log("Completed Successfully!"));

Cái thứ hai là hàm gọi lại lỗi bắt lỗi nếu có bất kỳ được phát ra.

Xem thêm: Rigger Là Gì - Rigger Nghĩa Là Gì Trong Tiếng Việt

chức năng cuối cùng là để nhận trạng thái hoàn chỉnh để nó có thể phản ứng với điều này.

Lưu ý: trạng thái hoàn thành & lỗi chỉ có thể được phát ra một lần bên trong một định nghĩa có thể quan sát được và tất cả mã xuất hiện sau lệnh gọi lỗi () hoặc hoàn thành () sẽ bị bỏ qua và không được thực thi lấy nó làm từ khóa trả về

Bây giờ chạy ứng dụng, bạn sẽ nhận được một cái gì đó tương tự như:

Next: HelloNext: HelloNext: 15Next: { id: 1 }Next: After two secondsCompleted Successfully!

Chủ đề Rxjs

Đối tượng là một loại có thể quan sát đặc biệt, điểm khác biệt chính là Đối tượng có thể đóng cả hai vai trò Người quan sát và Người quan sát cùng một lúc, có nghĩa là nó có thể phát ra các sự kiện và trạng thái (Có thể quan sát) và đồng thời lắng nghe chúng (Người quan sát).

Dưới đây là một số khác biệt chính giữa Đối tượng và Đối tượng có thể quan sát.

Đối tượng đang Hot chúng chạy ngay sau khi bắt đầu chúng trong khi Observable cần ít nhất một người đăng ký để bắt đầu phát ra các giá trị. Các chủ thể không có phạm vi chức năng như một Observable, cho phép họ đóng vai trò của Observable để phát ra các giá trị và trạng thái và lắng nghe các sự kiện đó với tư cách là Observer. Tất cả các Đối tượng quan sát đều chia sẻ cùng một bối cảnh thực thi, vì vậy thay vì tạo một phiên bản mới của định nghĩa Có thể quan sát mỗi khi chúng tôi đăng ký Đối tượng, đối tượng sẽ chia sẻ cùng một định nghĩa với tất cả những người đăng ký (quan sát viên). BehaviorSubject nó cung cấp cho bạn khả năng chỉ định một giá trị ban đầu sẽ được phát ra cho tất cả những người quan sát lúc đầu khi họ đăng ký. ReplaySubject nó cung cấp cho bạn khả năng lấy tất cả các giá trị được phát ra trước đó trước khi người quan sát đăng ký vào luồng (BehaviorSubject). AsyncSubject nó cho phép bạn chạy mã Async với một bộ lập lịch.

const mySubject = new rxjs.Subject();mySubject.next("This value is pushed before subject runs");mySubject.next("THIS WILL NOT BE RECEIVED");mySubject.subscribe( v => console.log("Next: ", v), err => console.error(err), () => console.log("Completed Successfully!"));mySubject.next("this value gets received");

Next: this value gets received

Và đó là lúc các loại Chủ thể khác có ích.

Rxjs & nbsp; Chủ đề Hành vi

BehaviorSubjects cho phép bạn chỉ định một giá trị ban đầu được phát ra cho tất cả những người quan sát lúc đầu khi họ đăng ký chủ đề lần đầu tiên.

const mySubject = new rxjs.BehaviorSubject("INITIAL");mySubject.subscribe( v => console.log("Next: ", v), err => console.error(err), () => console.log("Completed Successfully!"));mySubject.next("this value gets received");

Next: INITIALNext: this value gets received

Rxjs & nbsp; Chủ đề phát lại

ReplaySubject cho phép bạn nhận tất cả các giá trị được phát ra trước khi người quan sát đăng ký luồng, có nghĩa là bạn có thể khởi tạo ReplaySubject của mình và phát ra ba giá trị sau đó bạn đăng ký một người quan sát vào đối tượng, người quan sát này khi đăng ký thì sẽ nhận được tất cả ba giá trị được phát ra trước đó theo thứ tự của sự bắt chước.

//Initialize a ReplaySubject const mySubject = new rxjs.ReplaySubject();//We emit two values before we subscribe to the streammySubject.next("This value is pushed before subject runs");mySubject.next("THIS IS RECEIVED");mySubject.subscribe( v => console.log("Next: ", v), err => console.error(err), () => console.log("Completed Successfully!"));mySubject.next("this value gets received");

Next: This value is pushed before subject runsNext: THIS IS RECEIVEDNext: this value gets received

Toán tử & nbsp; Rxjs

Các toán tử là đường của thư viện Rxjs vì chúng cho phép dễ dàng tạo các toán tử có thể quan sát được cho các toán tử cụ thể mà không cần xác định toàn bộ logic có thể quan sát của riêng bạn.

Vì vậy, ví dụ: bạn có một Mảng dữ liệu và bạn muốn phát ra tất cả các mục theo thứ tự bằng cách sử dụng một có thể quan sát được, bạn có thể đạt được điều này bằng cách sử dụng toán tử from lấy một đối tượng có thể lặp lại bất kỳ thứ gì như Promise, Array, string… và trả về một Observable .

const rxjs = require("rxjs");const myData = <"hi", 15, "icecream">;const myDataObservable = rxjs.from(myData).subscribe((v) => console.log("Next: ",myData));

Next: hiNext: 15Next: icecream

Bạn có thể kiểm tra danh sách đầy đủ các nhà khai thác có sẵn với các ví dụ chi tiết và thông tin về từng nhà khai thác trên Tài liệu

Nhà điều hành hẹn giờ

Toán tử Timer được sử dụng để tạo một Observable phát ra trạng thái sau một khoảng thời gian được chỉ định bằng mili giây.

//We create a timer observable and we pipe the emited value to a custom value using pipe method//We also use mapTo operator to map what ever emitted value to a custom value we specifyconst timer1 = rxjs.timer(1000).pipe(mapTo("hi"));//And make sure to subscribe to ittimer1.subscribe( v => console.log("Next: ", v), err => console.error(err), () => console.log("Completed Successfully!"));

//Afet 1 second Next: hi

Nhà điều hành Concat

Toán tử concat được sử dụng để nối hai hoặc nhiều Quan sát với nhau sẽ chạy mọi Quan sát đơn lẻ sau khi một quan sát trước khi hoàn thành, vì vậy nó sẽ đợi hoàn thành một có thể quan sát để chuyển sang quan sát tiếp theo.

const timer1 = rxjs.timer(1000).pipe(mapTo("hi"));const timer2 = rxjs.timer(2000).pipe(mapTo("hello"));rxjs .concat(timer1, timer2) .subscribe( v => console.log("Next: ", v), err => console.error(err), () => console.log("Completed Successfully!") );

//After one second hi//Wait for timer1 to complete then after two seconds hello

Toán tử bản đồ có thể ánh xạ bất kỳ giá trị nào được phát ra thành một giá trị khác giống như mapT Để hoạt động, những toán tử đó chỉ thao tác dữ liệu thông qua phương thức ống mà họ không tạo ra một Observable mới.

Từ ví dụ trước về timer1 & timer2, chúng ta có thể ánh xạ giá trị mới được phát ra từ Observable kết hợp mới được tạo thành Đối tượng tùy chỉnh thay thế.

//Timers generation here...//We map each emitted value to a new object with item property holding the actual value //and new added exists property set to true.rxjs .concat(timer1, timer2) .pipe(map(v => ({ item: v, exists: true }))) .subscribe( v => console.log("Next: ", v), err => console.error(err), () => console.log("Completed Successfully!") );

//After one second {item: "hi", exists: true}//Wait for timer1 to complete then after two seconds {item: "hello", exists: true}

Leave a Reply

Your email address will not be published. Required fields are marked *