RxJS - คู่มือฉบับย่อ
บทนี้เกี่ยวข้องกับข้อมูลเกี่ยวกับคุณสมบัติข้อดีและข้อเสียของ RxJS เราจะได้เรียนรู้ว่าเมื่อใดควรใช้ RxJS
รูปแบบเต็มของ RxJS คือ Reactive Extension for Javascript. เป็นไลบรารี javascript ที่ใช้ observables เพื่อทำงานกับโปรแกรมรีแอคทีฟที่เกี่ยวข้องกับการเรียกข้อมูลแบบอะซิงโครนัสการเรียกกลับและโปรแกรมตามเหตุการณ์ RxJS สามารถใช้ได้กับไลบรารีและเฟรมเวิร์ก Javascript อื่น ๆ ได้รับการสนับสนุนโดย javascript และ typescript
RxJS คืออะไร?
ตามเว็บไซต์อย่างเป็นทางการของRxJSถูกกำหนดให้เป็นไลบรารีสำหรับการเขียนโปรแกรมแบบอะซิงโครนัสและตามเหตุการณ์โดยใช้ลำดับที่สังเกตได้ มันมีประเภทหลักหนึ่งประเภทคือ Observable ประเภทดาวเทียม (Observer, Schedulers, Subjects) และตัวดำเนินการที่ได้รับแรงบันดาลใจจาก Array # extras (แผนที่, ตัวกรอง, ลด, ทุกๆ ฯลฯ ) เพื่อให้สามารถจัดการเหตุการณ์แบบอะซิงโครนัสเป็นคอลเล็กชันได้
คุณสมบัติของ RxJS
ใน RxJS แนวคิดต่อไปนี้ดูแลจัดการงาน async -
สังเกตได้
สังเกตได้คือฟังก์ชันที่สร้างผู้สังเกตการณ์และเชื่อมต่อกับแหล่งที่มาซึ่งคาดว่าจะมีค่าตัวอย่างเช่นการคลิกเหตุการณ์เมาส์จากองค์ประกอบ dom หรือคำขอ Http เป็นต้น
ผู้สังเกตการณ์
เป็นวัตถุที่มีเมธอด next (), error () และ complete () ซึ่งจะถูกเรียกเมื่อมีปฏิสัมพันธ์กับสิ่งที่สังเกตได้เช่นแหล่งที่มาโต้ตอบสำหรับการคลิกปุ่มตัวอย่างคำขอ Http เป็นต้น
การสมัครสมาชิก
เมื่อมีการสร้างสิ่งที่สังเกตได้ในการดำเนินการที่สังเกตได้เราจำเป็นต้องสมัครสมาชิก นอกจากนี้ยังสามารถใช้เพื่อยกเลิกการดำเนินการ
ตัวดำเนินการ
ตัวดำเนินการเป็นฟังก์ชันบริสุทธิ์ที่รับการสังเกตได้เป็นอินพุตและเอาต์พุตก็เป็นสิ่งที่สังเกตได้เช่นกัน
เรื่อง
วัตถุเป็นสิ่งที่สังเกตได้ซึ่งสามารถพูดคุยกับผู้สังเกตการณ์หลายคนได้หลายผู้รับ พิจารณาปุ่มที่มีตัวฟังเหตุการณ์ฟังก์ชั่นที่แนบมากับเหตุการณ์โดยใช้ addlistener จะถูกเรียกทุกครั้งที่ผู้ใช้คลิกที่ปุ่มฟังก์ชันการทำงานที่คล้ายกันจะใช้กับหัวเรื่องด้วย
ตัวจัดกำหนดการ
ตัวกำหนดตารางเวลาควบคุมการดำเนินการเมื่อการสมัครสมาชิกต้องเริ่มต้นและแจ้งเตือน
ควรใช้ RxJS เมื่อใด
หากโปรเจ็กต์ของคุณประกอบด้วยการจัดการงาน async มากกว่า RxJS เป็นทางเลือกที่ดี โดยค่าเริ่มต้นจะโหลดด้วยโครงการ Angular
ข้อดีของการใช้ RxJS
ต่อไปนี้เป็นข้อดีของการใช้ RxJS -
RxJS สามารถใช้ได้กับไลบรารีและเฟรมเวิร์ก Javascript อื่น ๆ ได้รับการสนับสนุนโดย javascript และ typescript ตัวอย่างบางส่วน ได้แก่ Angular, ReactJS, Vuejs, nodejs เป็นต้น
RxJS เป็นไลบรารีที่ยอดเยี่ยมเมื่อพูดถึงการจัดการงาน async RxJS ใช้สิ่งที่สังเกตได้เพื่อทำงานกับโปรแกรมรีแอคทีฟที่เกี่ยวข้องกับการเรียกข้อมูลแบบอะซิงโครนัสการเรียกกลับและโปรแกรมตามเหตุการณ์
RxJS นำเสนอชุดตัวดำเนินการจำนวนมากในทางคณิตศาสตร์การแปลงการกรองยูทิลิตี้เงื่อนไขการจัดการข้อผิดพลาดรวมหมวดหมู่ที่ทำให้ชีวิตง่ายขึ้นเมื่อใช้กับการเขียนโปรแกรมแบบรีแอคทีฟ
ข้อเสียของการใช้ RxJS
ต่อไปนี้เป็นข้อเสียของการใช้ RxJS -
การดีบักโค้ดด้วยสิ่งที่สังเกตได้นั้นยากเล็กน้อย
เมื่อคุณเริ่มใช้ Observables คุณสามารถวางโค้ดทั้งหมดไว้ใต้สิ่งที่สังเกตได้
ในบทนี้เราจะติดตั้ง RxJS ในการทำงานกับ RxJS เราจำเป็นต้องมีการตั้งค่าต่อไปนี้ -
- NodeJS
- Npm
- การติดตั้งแพ็คเกจ RxJS
การติดตั้ง NODEJS และ NPM
การติดตั้ง RxJS โดยใช้ npm นั้นง่ายมาก คุณต้องติดตั้ง nodejs และ npm ในระบบของคุณ หากต้องการตรวจสอบว่ามีการติดตั้ง NodeJS และ npm ในระบบของคุณหรือไม่ให้ลองดำเนินการคำสั่งต่อไปนี้ในพรอมต์คำสั่งของคุณ
E:\>node -v && npm -v
v10.15.1
6.4.1
ในกรณีที่คุณได้รับเวอร์ชันหมายความว่ามีการติดตั้ง nodejs และ npm ในระบบของคุณและเวอร์ชันคือ 10 และ 6 ในระบบในขณะนี้
หากไม่พิมพ์อะไรเลยให้ติดตั้ง nodejs บนระบบของคุณ ในการติดตั้ง nodejs ให้ไปที่โฮมเพจhttps://nodejs.org/en/download/ ของ nodejs และติดตั้งแพ็คเกจตามระบบปฏิบัติการของคุณ
หน้าดาวน์โหลดของ nodejs จะมีลักษณะดังต่อไปนี้ -
ติดตั้งแพคเกจที่จำเป็นตามระบบปฏิบัติการของคุณ เมื่อติดตั้ง nodejs แล้วจะมีการติดตั้ง npm ควบคู่ไปด้วย หากต้องการตรวจสอบว่ามีการติดตั้ง npm หรือไม่ให้พิมพ์ npm –v ในเทอร์มินัล ควรแสดงเวอร์ชันของ npm
การติดตั้งแพ็คเกจ RxJS
ในการเริ่มต้นด้วยการติดตั้ง RxJS ขั้นแรกให้สร้างโฟลเดอร์ชื่อ rxjsproj/ ที่ซึ่งเราจะฝึกฝนตัวอย่าง RxJS ทั้งหมด
เมื่อโฟลเดอร์ rxjsproj/ ถูกสร้างรันคำสั่ง npm initสำหรับการตั้งค่าโครงการตามที่แสดงด้านล่าง
E:\>mkdir rxjsproj
E:\>cd rxjsproj
E:\rxjsproj>npm init
Npm initคำสั่งจะถามคำถามสองสามข้อในระหว่างการดำเนินการเพียงแค่กด Enter และดำเนินการต่อ เมื่อดำเนินการ npm init เสร็จแล้วก็จะสร้างpackage.json ภายใน rxjsproj / ดังแสดงด้านล่าง -
rxjsproj/
package.json
ตอนนี้คุณสามารถติดตั้ง rxjs โดยใช้คำสั่งด้านล่าง -
npm install ---save-dev rxjs
E:\rxjsproj>npm install --save-dev rxjs
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
+ [email protected]
added 2 packages from 7 contributors and audited 2 packages in 21.89s
found 0 vulnerabilities
เสร็จสิ้นด้วยการติดตั้ง RxJS ตอนนี้ให้เราลองใช้ RxJS เพื่อสร้างโฟลเดอร์src/ ข้างใน rxjsproj/
ตอนนี้เราจะมีโครงสร้างโฟลเดอร์ดังที่แสดงด้านล่าง -
rxjsproj/
node_modules/
src/
package.json
ข้างใน src/ สร้างไฟล์ testrx.jsและเขียนรหัสต่อไปนี้ -
testrx.js
import { of } from 'rxjs;
import { map } from 'rxjs/operators';
map(x => x * x)(of(1, 2, 3)).subscribe((v) => console.log(`Output is: ${v}`));
เมื่อเราไปรันโค้ดด้านบนใน command prompt โดยใช้คำสั่ง - node testrx.jsมันจะแสดงข้อผิดพลาดสำหรับการนำเข้าเนื่องจาก nodejs ไม่รู้ว่าจะทำอย่างไรกับการนำเข้า
ในการทำให้การนำเข้าทำงานกับ nodejs เราจำเป็นต้องติดตั้งแพ็คเกจโมดูล ES6 โดยใช้ npm ดังที่แสดงด้านล่าง -
E:\rxjsproj\src>npm install --save-dev esm
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
+ [email protected]
added 1 package from 1 contributor and audited 3 packages in 9.32s
found 0 vulnerabilities
เมื่อติดตั้งแพคเกจแล้วเราสามารถดำเนินการได้ testrx.js ไฟล์ดังรูปด้านล่าง -
E:\rxjsproj\src>node -r esm testrx.js
Output is: 1
Output is: 4
Output is: 9
เราสามารถเห็นผลลัพธ์ได้แล้วซึ่งแสดงว่า RxJS ได้รับการติดตั้งและพร้อมใช้งานแล้ว วิธีการข้างต้นจะช่วยให้เราทดสอบ RxJS ในบรรทัดคำสั่ง ในกรณีที่คุณต้องการทดสอบ RxJS ในเบราว์เซอร์เราจำเป็นต้องมีแพ็คเกจเพิ่มเติม
การทดสอบ RxJS ในเบราว์เซอร์
ติดตั้งแพ็คเกจต่อไปนี้ภายใน rxjsproj / โฟลเดอร์ -
npm install --save-dev babel-loader @babel/core @babel/preset-env webpack webpack-cli webpack-dev-server
E:\rxjsproj>npm install --save-dev babel-loader
@babel/core @babel/preset-env webpack webpack-cli webpack-dev-server
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]
(node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
+ [email protected]
+ @babel/[email protected]
+ @babel/[email protected]
+ [email protected]
+ [email protected]
added 675 packages from 373 contributors and audited 10225 packages in 255.567s
found 0 vulnerabilities
ในการเริ่มต้นเซิร์ฟเวอร์เพื่อรันไฟล์ Html ของเราเราจะใช้ webpack-server คำสั่ง "เผยแพร่" ใน package.json จะช่วยให้เราเริ่มต้นและแพ็คไฟล์ js ทั้งหมดโดยใช้ webpack ไฟล์ js ที่อัดแน่นซึ่งเป็นไฟล์ js สุดท้ายของเราที่จะใช้จะถูกบันทึกไว้ที่โฟลเดอร์path / dev
ในการใช้ webpack เราจำเป็นต้องเรียกใช้ npm run publish คำสั่งและคำสั่งถูกเพิ่มใน package.json ดังที่แสดงด้านล่าง -
Package.json
{
"name": "rxjsproj",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"publish":"webpack && webpack-dev-server --output-public=/dev/",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.6.0",
"@babel/preset-env": "^7.6.0",
"babel-loader": "^8.0.6",
"esm": "^3.2.25",
"rxjs": "^6.5.3",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.8",
"webpack-dev-server": "^3.8.0"
}
}
ในการทำงานกับ webpack ก่อนอื่นเราต้องสร้างไฟล์ชื่อ webpack.config.js ที่มีรายละเอียดการกำหนดค่าเพื่อให้ webpack ทำงานได้
รายละเอียดในไฟล์มีดังนี้ -
var path = require('path');
module.exports = {
entry: {
app: './src/testrx.js'
},
output: {
path: path.resolve(__dirname, 'dev'),
filename: 'main_bundle.js'
},
mode:'development',
module: {
rules: [
{
test:/\.(js)$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['@babel/preset-env']
}
}
]
}
};
โครงสร้างของไฟล์เป็นดังที่แสดงด้านบน เริ่มต้นด้วยเส้นทางที่ให้รายละเอียดเส้นทางปัจจุบัน
var path = require('path'); //gives the current path
ถัดไปคืออ็อบเจ็กต์ module.exports ซึ่งมีรายการคุณสมบัติเอาต์พุตและโมดูล การเข้าเป็นจุดเริ่มต้น ที่นี่เราต้องให้ไฟล์ start js ที่เราต้องการรวบรวม
entry: {
app: './src/testrx.js'
},
path.resolve (_dirname, 'src / testrx.js') - จะค้นหาโฟลเดอร์ src ในไดเร็กทอรีและ testrx.js ในโฟลเดอร์นั้น
เอาต์พุต
output: {
path: path.resolve(__dirname, 'dev'),
filename: 'main_bundle.js'
},
ผลลัพธ์คืออ็อบเจ็กต์ที่มี path และ filename details.path จะเก็บโฟลเดอร์ที่จะเก็บไฟล์ที่คอมไพล์ไว้และชื่อไฟล์จะบอกชื่อไฟล์สุดท้ายที่จะใช้ในไฟล์. html ของคุณ
โมดูล
module: {
rules: [
{
test:/\.(js)$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['@babel/preset-env']
}
}
]
}
Moduleเป็นวัตถุที่มีรายละเอียดกฎซึ่งมีคุณสมบัติเช่นการทดสอบรวมตัวโหลดแบบสอบถาม การทดสอบจะเก็บรายละเอียดของไฟล์ js ทั้งหมดที่ลงท้ายด้วย. js และ. jsx มีรูปแบบซึ่งจะมองหา. js ต่อท้ายในจุดเข้าที่กำหนด
Include บอกโฟลเดอร์ที่จะใช้ในการดูไฟล์
The loader ใช้ babel-loader ในการรวบรวมโค้ด
The queryมีคุณสมบัติที่ตั้งไว้ล่วงหน้าซึ่งเป็นอาร์เรย์ที่มีค่า '@ babel / preset-env' มันจะถ่ายทอดรหัสตามสภาพแวดล้อม ES ที่คุณต้องการ
โครงสร้างโฟลเดอร์สุดท้ายจะเป็นดังนี้ -
rxjsproj/
node_modules/
src/
testrx.js
index.html
package.json
webpack.config.js
เรียกใช้คำสั่ง
npm run publishจะสร้าง dev / โฟลเดอร์ที่มีไฟล์ main_bundle.js อยู่ในนั้น เซิร์ฟเวอร์จะเริ่มทำงานและคุณสามารถทดสอบ index.html ของคุณในเบราว์เซอร์ดังที่แสดงด้านล่าง
เปิดเบราว์เซอร์และกด url - http://localhost:8080/
เอาต์พุตจะแสดงในคอนโซล
เรากำลังใช้ 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 () |
สังเกตได้คือฟังก์ชันที่สร้างผู้สังเกตการณ์และเชื่อมต่อกับแหล่งที่มาที่คาดว่าจะได้ค่าตัวอย่างเช่นการคลิกเหตุการณ์เมาส์จากองค์ประกอบ dom หรือคำขอ Http เป็นต้น
Observer is an object with callback functionsที่จะถูกเรียกเมื่อมีการโต้ตอบกับ Observable กล่าวคือแหล่งที่มาได้โต้ตอบสำหรับการคลิกปุ่มตัวอย่างคำขอ Http เป็นต้น
เราจะพูดถึงหัวข้อต่อไปนี้ในบทนี้ -
- สร้างสังเกตได้
- สมัครสมาชิกสังเกตได้
- ดำเนินการตามที่สังเกตได้
สร้างสังเกตได้
สามารถสร้างที่สังเกตได้โดยใช้คอนสตรัคเตอร์ที่สังเกตได้และยังใช้เมธอดการสร้างที่สังเกตได้และโดยส่งผ่านฟังก์ชันสมัครสมาชิกเป็นอาร์กิวเมนต์ดังที่แสดงด้านล่าง -
testrx.js
import { Observable } from 'rxjs';
var observable = new Observable(
function subscribe(subscriber) {
subscriber.next("My First Observable")
}
);
เราได้สร้างข้อความที่สังเกตได้และเพิ่มข้อความ“ My First Observable” โดยใช้ subscriber.next วิธีการที่มีอยู่ใน Observable
เรายังสามารถสร้าง Observable โดยใช้ Observable.create () method ดังที่แสดงด้านล่าง -
testrx.js
import { Observable } from 'rxjs';
var observer = Observable.create(
function subscribe(subscriber) {
subscriber.next("My First Observable")
}
);
สมัครสมาชิกสังเกตได้
คุณสามารถสมัครรับข้อมูลที่สังเกตได้ดังนี้ -
testrx.js
import { Observable } from 'rxjs';
var observer = new Observable(
function subscribe(subscriber) {
subscriber.next("My First Observable")
}
);
observer.subscribe(x => console.log(x));
เมื่อผู้สังเกตการณ์สมัครเป็นสมาชิกผู้สังเกตการณ์จะเริ่มการดำเนินการของ Observable
นี่คือสิ่งที่เราเห็นในคอนโซลเบราว์เซอร์ -
ดำเนินการตามที่สังเกตได้
สิ่งที่สังเกตได้จะถูกดำเนินการเมื่อสมัครรับข้อมูล ผู้สังเกตการณ์เป็นวัตถุที่มีสามวิธีที่ได้รับการแจ้งเตือน
next() - วิธีนี้จะส่งค่าเช่นตัวเลขสตริงวัตถุ ฯลฯ
complete() - วิธีนี้จะไม่ส่งค่าใด ๆ และระบุสิ่งที่สังเกตได้ว่าเสร็จสิ้น
error() - วิธีนี้จะส่งข้อผิดพลาดถ้ามี
ให้เราสร้างสิ่งที่สังเกตได้ด้วยการแจ้งเตือนทั้งสามและดำเนินการเหมือนกัน
testrx.js
import { Observable } from 'rxjs';
var observer = new Observable(
function subscribe(subscriber) {
try {
subscriber.next("My First Observable");
subscriber.next("Testing Observable");
subscriber.complete();
} catch(e){
subscriber.error(e);
}
}
);
observer.subscribe(x => console.log(x), (e)=>console.log(e),
()=>console.log("Observable is complete"));
ในโค้ดด้านบนเราได้เพิ่มวิธีการถัดไปสมบูรณ์และข้อผิดพลาด
try{
subscriber.next("My First Observable");
subscriber.next("Testing Observable");
subscriber.complete();
} catch(e){
subscriber.error(e);
}
ในการดำเนินการต่อไปเสร็จสมบูรณ์และเกิดข้อผิดพลาดเราต้องเรียกใช้วิธีการสมัครสมาชิกดังที่แสดงด้านล่าง -
observer.subscribe(x => console.log(x), (e)=>console.log(e),
()=>console.log("Observable is complete"));
เมธอดข้อผิดพลาดจะถูกเรียกใช้หากมีข้อผิดพลาดเท่านั้น
นี่คือผลลัพธ์ที่เห็นในเบราว์เซอร์ -
ตัวดำเนินการเป็นส่วนสำคัญของ RxJS ตัวดำเนินการเป็นฟังก์ชันบริสุทธิ์ที่รับการสังเกตได้เป็นอินพุตและเอาต์พุตก็เป็นสิ่งที่สังเกตได้เช่นกัน
การทำงานกับ Operators
ตัวดำเนินการเป็นฟังก์ชันบริสุทธิ์ที่สามารถสังเกตได้เป็นอินพุตและเอาต์พุตก็สามารถสังเกตได้เช่นกัน
ในการทำงานกับโอเปอเรเตอร์เราต้องใช้เมธอด pipe ()
ตัวอย่างการใช้ท่อ ()
let obs = of(1,2,3); // an observable
obs.pipe(
operator1(),
operator2(),
operator3(),
operator3(),
)
ในตัวอย่างข้างต้นเราได้สร้างสิ่งที่สังเกตได้โดยใช้ of()วิธีการที่ใช้ค่า 1, 2 และ 3 ในตอนนี้คุณสามารถดำเนินการที่แตกต่างกันโดยใช้ตัวดำเนินการจำนวนเท่าใดก็ได้โดยใช้เมธอด pipe () ดังที่แสดงด้านบน การดำเนินการของตัวดำเนินการจะดำเนินไปตามลำดับตามที่สังเกตได้
ด้านล่างนี้เป็นตัวอย่างการทำงาน -
import { of } from 'rxjs';
import { map, reduce, filter } from 'rxjs/operators';
let test1 = of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
let case1 = test1.pipe(
filter(x => x % 2 === 0),
reduce((acc, one) => acc + one, 0)
)
case1.subscribe(x => console.log(x));
เอาต์พุต
30
ในตัวอย่างข้างต้นเราได้ใช้ตัวดำเนินการกรองที่กรองตัวเลขคู่และถัดไปเราใช้ reduce() ตัวดำเนินการที่จะเพิ่มค่าคู่และให้ผลลัพธ์เมื่อสมัครสมาชิก
นี่คือรายการของ Observables ที่เราจะพูดถึง
- Creation
- Mathematical
- Join
- Transformation
- Filtering
- Utility
- Conditional
- Multicasting
- การจัดการข้อผิดพลาด
ตัวดำเนินการสร้าง
ต่อไปนี้เป็นตัวดำเนินการที่เราจะพูดถึงในหมวดตัวดำเนินการสร้าง -
ซีเนียร์ No | ตัวดำเนินการและคำอธิบาย |
---|---|
1 | Ajax ตัวดำเนินการนี้จะทำการร้องขอ ajax สำหรับ URL ที่กำหนด |
2 | จาก ตัวดำเนินการนี้จะสร้างสิ่งที่สังเกตได้จากอาร์เรย์วัตถุที่มีลักษณะคล้ายอาร์เรย์สัญญาวัตถุที่ทำซ้ำได้หรือวัตถุที่มีลักษณะเหมือนที่สังเกตได้ |
3 | fromEvent ตัวดำเนินการนี้จะให้เอาต์พุตเป็นค่าที่สังเกตได้ซึ่งจะใช้กับองค์ประกอบที่ปล่อยเหตุการณ์ออกมาเช่นปุ่มการคลิกเป็นต้น |
4 | fromEventPattern ตัวดำเนินการนี้จะสร้างสิ่งที่สังเกตได้จากฟังก์ชันอินพุตที่ใช้ในการลงทะเบียนตัวจัดการเหตุการณ์ |
5 | ช่วงเวลา ตัวดำเนินการนี้จะสร้าง Observable ทุกครั้งตามเวลาที่กำหนด .. |
6 | ของ ตัวดำเนินการนี้จะรับอาร์กิวเมนต์ที่ส่งผ่านและแปลงเป็นข้อโต้แย้งที่สังเกตได้ |
7 | พิสัย ตัวดำเนินการนี้จะสร้าง Observable ซึ่งจะให้ลำดับของตัวเลขตามช่วงที่ระบุ |
8 | throwError ตัวดำเนินการนี้จะสร้างสิ่งที่สังเกตได้ซึ่งจะแจ้งข้อผิดพลาด |
9 | จับเวลา ตัวดำเนินการนี้จะสร้างค่าที่สังเกตได้ซึ่งจะปล่อยค่าออกมาหลังจากหมดเวลาและค่าจะเพิ่มขึ้นเรื่อย ๆ หลังจากการโทรแต่ละครั้ง |
10 | iif โอเปอเรเตอร์นี้จะตัดสินใจว่าจะสมัครใช้งาน Observable ตัวใด |
ตัวดำเนินการทางคณิตศาสตร์
ต่อไปนี้เป็นตัวดำเนินการที่เราจะพูดถึงในหมวดตัวดำเนินการทางคณิตศาสตร์ -
ซีเนียร์ No | ตัวดำเนินการและคำอธิบาย |
---|---|
1 | นับ ตัวดำเนินการ count () ใช้ค่าที่สังเกตได้และแปลงเป็นค่าที่สังเกตได้ซึ่งจะให้ค่าเดียว |
2 | สูงสุด วิธีการสูงสุดจะใช้ค่าที่สังเกตได้ทั้งหมดและส่งคืนค่าที่สังเกตได้ด้วยค่าสูงสุด |
3 | นาที Min method จะใช้ค่าที่สังเกตได้ทั้งหมดและส่งกลับค่าที่สังเกตได้ด้วยค่า min |
4 | ลด ในตัวดำเนินการลดฟังก์ชันตัวสะสมจะถูกใช้กับอินพุตที่สังเกตได้และฟังก์ชันตัวสะสมจะส่งคืนค่าสะสมในรูปแบบของค่าที่สังเกตได้โดยมีค่าเมล็ดพันธุ์ทางเลือกที่ส่งผ่านไปยังฟังก์ชันตัวสะสม ฟังก์ชันลด () จะรับ 2 อาร์กิวเมนต์หนึ่งฟังก์ชันตัวสะสมและค่าเมล็ดที่สอง |
เข้าร่วม Operators
ต่อไปนี้เป็นตัวดำเนินการที่เราจะพูดถึงในหมวดตัวดำเนินการเข้าร่วม
ซีเนียร์ No | ตัวดำเนินการและคำอธิบาย |
---|---|
1 | concat ตัวดำเนินการนี้จะปล่อย Observable ตามลำดับที่กำหนดให้เป็นอินพุตและดำเนินการต่อไป |
2 | ส้อมเข้าร่วม ตัวดำเนินการนี้จะถูกนำมาใช้ในอาร์เรย์หรือวัตถุ dict เป็นอินพุตและจะรอให้สิ่งที่สังเกตเห็นได้ดำเนินการจนเสร็จสมบูรณ์และส่งคืนค่าสุดท้ายที่ปล่อยออกมาจากค่าที่สังเกตได้ที่กำหนด |
3 | ผสาน ตัวดำเนินการนี้จะรับอินพุตที่สังเกตได้และจะปล่อยค่าทั้งหมดจากค่าที่สังเกตได้และปล่อยเอาต์พุตเดียวที่สังเกตได้ |
4 | แข่ง มันจะคืนค่าที่สังเกตได้ซึ่งจะเป็นสำเนามิเรอร์ของแหล่งแรกที่สังเกตได้ |
ตัวดำเนินการเปลี่ยนแปลง
ต่อไปนี้เป็นตัวดำเนินการที่เราจะพูดถึงในหมวดตัวดำเนินการการเปลี่ยนแปลง
ซีเนียร์ No | ตัวดำเนินการและคำอธิบาย |
---|---|
1 | กันชน บัฟเฟอร์ทำงานบนสิ่งที่สังเกตได้และใช้ในการโต้แย้งเป็นสิ่งที่สังเกตได้ มันจะเริ่มบัฟเฟอร์ค่าที่ปล่อยออกมาจากเดิมที่สังเกตได้ในอาร์เรย์และจะปล่อยออกมาเหมือนกันเมื่อสิ่งที่สังเกตได้ถูกนำมาเป็นอาร์กิวเมนต์จะเปล่งออกมา เมื่อสิ่งที่สังเกตได้ถูกนำมาใช้เป็นอาร์กิวเมนต์ปล่อยบัฟเฟอร์จะถูกรีเซ็ตและเริ่มบัฟเฟอร์อีกครั้งบนต้นฉบับจนกว่าอินพุตที่สังเกตได้จะปล่อยออกมาและสถานการณ์เดียวกันจะเกิดขึ้นซ้ำ |
2 | bufferCount ในกรณีของตัวดำเนินการ buffercount () จะรวบรวมค่าจากค่าที่สังเกตได้ซึ่งถูกเรียกใช้และปล่อยค่าเดียวกันเมื่อขนาดบัฟเฟอร์ที่กำหนดให้กับบัฟเฟอร์ที่ตรงกัน |
3 | bufferTime สิ่งนี้คล้ายกับ bufferCount ดังนั้นที่นี่จะรวบรวมค่าจากค่าที่สังเกตได้ซึ่งถูกเรียกใช้และปล่อย bufferTimeSpan เสร็จสิ้น มันต้องใช้เวลาใน 1 อาร์กิวเมนต์คือbufferTimeSpan |
4 | bufferToggle ในกรณีของ bufferToggle () ใช้ 2 อาร์กิวเมนต์ openings และ closedSelector อาร์กิวเมนต์เปิดสามารถสมัครใช้งานได้หรือสัญญาว่าจะเริ่มบัฟเฟอร์และอาร์กิวเมนต์ที่สอง closedSelector สามารถสมัครใช้งานได้อีกครั้งหรือสัญญาว่าตัวบ่งชี้จะปิดบัฟเฟอร์และปล่อยค่าที่รวบรวม |
5 | บัฟเฟอร์เมื่อ ตัวดำเนินการนี้จะให้ค่าในรูปแบบอาร์เรย์โดยใช้อาร์กิวเมนต์เดียวเป็นฟังก์ชันที่จะตัดสินใจว่าเมื่อใดควรปิดปล่อยและรีเซ็ตบัฟเฟอร์ |
6 | ขยาย ตัวดำเนินการขยายรับฟังก์ชั่นเป็นอาร์กิวเมนต์ซึ่งถูกนำไปใช้กับซอร์สที่สังเกตได้แบบวนซ้ำและบนเอาต์พุตที่สังเกตได้ ค่าสุดท้ายเป็นค่าที่สังเกตได้ |
7 | groupBy ในตัวดำเนินการ groupBy เอาต์พุตจะถูกจัดกลุ่มตามเงื่อนไขที่เฉพาะเจาะจงและรายการกลุ่มเหล่านี้จะถูกส่งออกเป็น GroupedObservable |
8 | แผนที่ ในกรณีของตัวดำเนินการแผนที่ฟังก์ชันโปรเจ็กต์จะถูกนำไปใช้กับแต่ละค่าบนแหล่งสัญญาณที่สังเกตได้และเอาต์พุตเดียวกันจะถูกปล่อยออกมาเป็น Observable |
9 | mapTo ค่าคงที่จะถูกกำหนดเป็นเอาต์พุตพร้อมกับ Observable ทุกครั้งที่แหล่งที่มาของ Observable ปล่อยค่าออกมา |
10 | mergeMap ในกรณีของตัวดำเนินการ mergeMap ฟังก์ชันของโปรเจ็กต์จะถูกนำไปใช้กับค่าต้นทางแต่ละค่าและผลลัพธ์ของมันจะถูกรวมเข้ากับเอาต์พุตที่สังเกตได้ |
11 | switchMap ในกรณีของตัวดำเนินการ switchMap ฟังก์ชันของโปรเจ็กต์จะถูกนำไปใช้กับค่าแหล่งที่มาแต่ละค่าและผลลัพธ์ของมันจะถูกรวมเข้ากับเอาต์พุตที่สังเกตได้และค่าที่ให้คือค่าที่สังเกตได้ล่าสุดที่คาดการณ์ไว้ |
12 | หน้าต่าง ต้องใช้ windowboundaries ของอาร์กิวเมนต์ซึ่งเป็นสิ่งที่สังเกตได้และให้ค่าที่สังเกตได้ที่ซ้อนกันกลับมาเมื่อใดก็ตามที่ windowboundaries ส่งเสียง |
ตัวดำเนินการกรอง
ต่อไปนี้เป็นตัวดำเนินการที่เราจะพูดถึงในหมวดตัวดำเนินการกรอง
ซีเนียร์ No | ตัวดำเนินการและคำอธิบาย |
---|---|
1 | ตีกลับ ค่าที่ปล่อยออกมาจากแหล่งที่มาสังเกตได้หลังจากนั้นสักครู่และการปล่อยจะถูกกำหนดโดยอินพุตอื่นที่กำหนดให้เป็นสังเกตได้หรือสัญญา |
2 | debounceTime จะปล่อยค่าจากแหล่งที่สามารถสังเกตได้หลังจากเวลาเสร็จสมบูรณ์เท่านั้น |
3 | ชัดเจน ตัวดำเนินการนี้จะให้ค่าทั้งหมดจากแหล่งที่สังเกตได้ซึ่งแตกต่างกันเมื่อเปรียบเทียบกับค่าก่อนหน้า |
4 | elementAt ตัวดำเนินการนี้จะให้ค่าเดียวจากแหล่งที่สามารถสังเกตได้ตามดัชนีที่กำหนด |
5 | กรอง ตัวดำเนินการนี้จะกรองค่าจากแหล่งที่สังเกตได้ตามฟังก์ชันเพรดิเคตที่กำหนด |
6 | อันดับแรก ตัวดำเนินการนี้จะให้ค่าแรกที่ปล่อยออกมาจากแหล่งที่สังเกตได้ |
7 | ล่าสุด ตัวดำเนินการนี้จะให้ค่าสุดท้ายที่ปล่อยออกมาจากแหล่งที่สังเกตได้ |
8 | เพิกเฉย ตัวดำเนินการนี้จะละเว้นค่าทั้งหมดจากแหล่งที่สังเกตได้และดำเนินการเฉพาะการเรียกเพื่อทำหน้าที่เรียกกลับให้สมบูรณ์หรือผิดพลาด |
9 | ตัวอย่าง ตัวดำเนินการนี้จะให้ค่าล่าสุดจากแหล่งที่สังเกตได้และผลลัพธ์จะขึ้นอยู่กับอาร์กิวเมนต์ที่ส่งไปให้มันเปล่งออกมา |
10 | ข้าม ตัวดำเนินการนี้จะให้ค่าที่สังเกตได้กลับมาซึ่งจะข้ามการเกิดครั้งแรกของรายการนับที่ใช้เป็นอินพุต |
11 | เค้น ตัวดำเนินการนี้จะแสดงผลและละเว้นค่าจากแหล่งที่สามารถสังเกตได้สำหรับเวลาที่กำหนดโดยฟังก์ชันอินพุตที่ใช้เป็นอาร์กิวเมนต์และกระบวนการเดียวกันจะถูกทำซ้ำ |
ตัวดำเนินการสาธารณูปโภค
ต่อไปนี้เป็นตัวดำเนินการที่เราจะพูดถึงในหมวดตัวดำเนินการยูทิลิตี้
ซีเนียร์ No | ตัวดำเนินการและคำอธิบาย |
---|---|
1 | แตะ ตัวดำเนินการนี้จะมีเอาต์พุตเช่นเดียวกับซอร์สที่สังเกตได้และสามารถใช้เพื่อบันทึกค่าไปยังผู้ใช้จากสิ่งที่สังเกตได้ ค่าหลักข้อผิดพลาดถ้ามีหรือถ้างานเสร็จสมบูรณ์ |
2 | ล่าช้า ตัวดำเนินการนี้จะหน่วงเวลาค่าที่ปล่อยออกมาจากแหล่งสัญญาณที่สังเกตได้ตามระยะหมดเวลาที่กำหนด |
3 | ล่าช้าเมื่อ ตัวดำเนินการนี้จะชะลอค่าที่ปล่อยออกมาจากแหล่งสัญญาณที่สังเกตได้ตามการหมดเวลาจากข้อมูลอื่นที่สังเกตได้ซึ่งนำมาเป็นอินพุต |
4 | สังเกต ตัวดำเนินการนี้ตามตัวกำหนดตารางเวลาการป้อนข้อมูลจะส่งการแจ้งเตือนจากแหล่งที่มาที่สังเกตได้อีกครั้ง |
5 | subscribeOn ตัวดำเนินการนี้ช่วยในการสมัครสมาชิกแบบอะซิงโครนัสกับแหล่งที่มาที่สังเกตได้ตามตัวกำหนดตารางเวลาที่ใช้เป็นอินพุต |
6 | timeInterval ตัวดำเนินการนี้จะส่งคืนอ็อบเจ็กต์ที่มีค่าปัจจุบันและเวลาที่ผ่านไประหว่างค่าปัจจุบันและค่าก่อนหน้าซึ่งคำนวณโดยใช้อินพุตตัวกำหนดตารางเวลา |
7 | การประทับเวลา ส่งคืนการประทับเวลาพร้อมกับค่าที่ปล่อยออกมาจากแหล่งที่มา Observable ซึ่งบอกเกี่ยวกับเวลาที่ปล่อยค่าออกมา |
8 | หมดเวลา ตัวดำเนินการนี้จะแสดงข้อผิดพลาดหากแหล่งที่มาของ Observable ไม่แสดงค่าหลังจากหมดเวลาที่กำหนด |
9 | toArray รวบรวมค่าแหล่งที่มาทั้งหมดจาก Observable และส่งออกเป็นอาร์เรย์เมื่อแหล่งที่มาเสร็จสมบูรณ์ |
ตัวดำเนินการตามเงื่อนไข
ต่อไปนี้เป็นตัวดำเนินการที่เราจะพูดถึงในหมวดตัวดำเนินการตามเงื่อนไข
ซีเนียร์ No | ตัวดำเนินการและคำอธิบาย |
---|---|
1 | defaultIfEmpty ตัวดำเนินการนี้จะส่งคืนค่าเริ่มต้นหากแหล่งที่สามารถสังเกตได้ว่างเปล่า |
2 | ทุก มันจะส่งคืนค่าที่สังเกตได้ตามฟังก์ชันอินพุตตรงตามเงื่อนไขของแต่ละค่าบนแหล่งที่สังเกตได้ |
3 | หา สิ่งนี้จะส่งคืนค่าที่สังเกตได้เมื่อค่าแรกของแหล่งที่สังเกตได้ตรงตามเงื่อนไขสำหรับฟังก์ชันเพรดิเคตที่นำมาเป็นอินพุต |
4 | findIndex ตัวดำเนินการนี้ตามตัวกำหนดตารางเวลาการป้อนข้อมูลจะส่งการแจ้งเตือนจากแหล่งที่มาที่สังเกตได้อีกครั้ง |
5 | มันว่างเปล่า ตัวดำเนินการนี้จะให้เอาต์พุตเป็นจริงหากอินพุตที่สังเกตได้ไปสำหรับการเรียกกลับที่สมบูรณ์โดยไม่ต้องเปล่งค่าใด ๆ และเป็นเท็จหากอินพุตที่สังเกตได้ปล่อยค่าใด ๆ |
ตัวดำเนินการมัลติคาสติ้ง
ต่อไปนี้เป็นตัวดำเนินการที่เราจะพูดถึงในประเภทตัวดำเนินการหลายช่อง ..
ซีเนียร์ No | ตัวดำเนินการและคำอธิบาย |
---|---|
1 | มัลติคาสต์ ผู้ให้บริการมัลติคาสต์แชร์การสมัครสมาชิกเดียวที่สร้างขึ้นกับสมาชิกรายอื่น พารามิเตอร์ที่มัลติคาสต์ใช้เป็น subject หรือเมธอดจากโรงงานที่ส่งคืน ConnectableObservable ที่มีเมธอด connect () ในการสมัครสมาชิกต้องเรียกเมธอด connect () |
2 | เผยแพร่ ตัวดำเนินการนี้ให้ ConnectableObservable กลับมาและจำเป็นต้องใช้เมธอด connect () เพื่อสมัครรับข้อมูลที่สังเกตได้ |
3 | เผยแพร่พฤติกรรม เผยแพร่ Behaviour ใช้ประโยชน์จาก BehaviourSubject และส่งคืน ConnectableObservable ต้องใช้วิธีการเชื่อมต่อ () เพื่อสมัครสมาชิกกับสิ่งที่สังเกตได้ที่สร้างขึ้น |
4 | เผยแพร่ล่าสุด เผยแพร่ Behaviour ใช้ประโยชน์จาก AsyncSubject และส่งคืน ConnectableObservable ต้องใช้วิธีการเชื่อมต่อ () เพื่อสมัครสมาชิกกับสิ่งที่สังเกตได้ที่สร้างขึ้น |
5 | เผยแพร่เล่นซ้ำ เผยแพร่ Replay ใช้ประโยชน์จากหัวข้อพฤติกรรมซึ่งสามารถบัฟเฟอร์ค่าและเล่นซ้ำกับสมาชิกใหม่และส่งคืน ConnectableObservable ต้องใช้วิธีการเชื่อมต่อ () เพื่อสมัครสมาชิกกับสิ่งที่สังเกตได้ที่สร้างขึ้น |
6 | แบ่งปัน เป็นนามแฝงสำหรับตัวดำเนินการ mutlicast () ที่มีข้อแตกต่างเพียงอย่างเดียวคือคุณไม่ต้องเรียกวิธีการเชื่อมต่อ () ด้วยตนเองเพื่อเริ่มการสมัครสมาชิก |
ตัวดำเนินการจัดการข้อผิดพลาด
ต่อไปนี้เป็นตัวดำเนินการที่เราจะพูดถึงในหมวดตัวดำเนินการจัดการข้อผิดพลาด
ซีเนียร์ No | ตัวดำเนินการและคำอธิบาย |
---|---|
1 | catchError ตัวดำเนินการนี้จะดูแลการจับข้อผิดพลาดบนแหล่งที่สังเกตได้โดยส่งคืนค่าที่สังเกตได้ใหม่หรือข้อผิดพลาด |
2 | ลองอีกครั้ง ตัวดำเนินการนี้จะดูแลการลองอีกครั้งบนแหล่งสัญญาณที่สังเกตได้หากมีข้อผิดพลาดและการลองใหม่จะทำตามจำนวนอินพุตที่กำหนด |
เมื่อมีการสร้างสิ่งที่สังเกตได้ในการดำเนินการที่สังเกตได้เราจำเป็นต้องสมัครสมาชิก
ตัวดำเนินการ count ()
นี่คือตัวอย่างง่ายๆในการสมัครรับข้อมูลที่สังเกตได้
ตัวอย่าง 1
import { of } from 'rxjs';
import { count } from 'rxjs/operators';
let all_nums = of(1, 7, 5, 10, 10, 20);
let final_val = all_nums.pipe(count());
final_val.subscribe(x => console.log("The count is "+x));
เอาต์พุต
The count is 6
การสมัครสมาชิกมีวิธีการหนึ่งที่เรียกว่ายกเลิกการสมัคร () เมธอด call to unsubscribe () จะลบทรัพยากรทั้งหมดที่ใช้สำหรับสังเกตได้นั่นคือสิ่งที่สังเกตได้จะถูกยกเลิก นี่คือตัวอย่างการทำงานของการใช้วิธียกเลิกการสมัคร ()
ตัวอย่าง 2
import { of } from 'rxjs';
import { count } from 'rxjs/operators';
let all_nums = of(1, 7, 5, 10, 10, 20);
let final_val = all_nums.pipe(count());
let test = final_val.subscribe(x => console.log("The count is "+x));
test.unsubscribe();
การสมัครสมาชิกจะถูกเก็บไว้ในการทดสอบตัวแปร เราได้ใช้ test.unsubscribe () สิ่งที่สังเกตได้
เอาต์พุต
The count is 6
วัตถุเป็นสิ่งที่สังเกตได้ซึ่งสามารถพูดคุยกับผู้สังเกตการณ์หลายคนได้หลายผู้รับ พิจารณาปุ่มที่มีตัวฟังเหตุการณ์ฟังก์ชั่นที่แนบมากับเหตุการณ์โดยใช้ 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 และค่าเดียวกับที่กำหนดให้กับสมาชิก
เอาต์พุต
ตัวกำหนดตารางเวลาควบคุมการดำเนินการเมื่อการสมัครสมาชิกต้องเริ่มต้นและแจ้งเตือน
ในการใช้ตัวกำหนดตารางเวลาเราต้องการสิ่งต่อไปนี้ -
import { Observable, asyncScheduler } from 'rxjs';
import { observeOn } from 'rxjs/operators';
นี่คือตัวอย่างการทำงานซึ่งเราจะใช้ตัวกำหนดตารางเวลาที่จะตัดสินใจดำเนินการ
ตัวอย่าง
import { Observable, asyncScheduler } from 'rxjs';
import { observeOn } from 'rxjs/operators';
var observable = new Observable(function subscribe(subscriber) {
subscriber.next("My First Observable");
subscriber.next("Testing Observable");
subscriber.complete();
}).pipe(
observeOn(asyncScheduler)
);
console.log("Observable Created");
observable.subscribe(
x => console.log(x),
(e)=>console.log(e),
()=>console.log("Observable is complete")
);
console.log('Observable Subscribed');
เอาต์พุต
หากไม่มีตัวกำหนดตารางเวลาผลลัพธ์จะเป็นดังที่แสดงด้านล่าง -
ในบทนี้เราจะดูวิธีใช้ RxJs กับ Angular เราจะไม่เข้าสู่กระบวนการติดตั้ง Angular ที่นี่หากต้องการทราบเกี่ยวกับการติดตั้ง Angular โปรดดูที่ลิงค์นี้ -https://www.tutorialspoint.com/angular7/angular7_environment_setup.htm
เราจะทำงานโดยตรงกับตัวอย่างซึ่งจะใช้ Ajax จาก RxJS เพื่อโหลดข้อมูล
ตัวอย่าง
app.component.ts
import { Component } from '@angular/core';
import { environment } from './../environments/environment';
import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = '';
data;
constructor() {
this.data = "";
this.title = "Using RxJs with Angular";
let a = this.getData();
}
getData() {
const response =
ajax('https://jsonplaceholder.typicode.com/users')
.pipe(map(e => e.response));
response.subscribe(res => {
console.log(res);
this.data = res;
});
}
}
app.component.html
<div>
<h3>{{title}}</h3>
<ul *ngFor="let i of data">
<li>{{i.id}}: {{i.name}}</li>
</ul>
</div>
<router-outlet></router-outlet>
เราใช้ ajax จาก RxJS ที่จะโหลดข้อมูลจาก url นี้ -https://jsonplaceholder.typicode.com/users.
เมื่อคุณรวบรวมการแสดงผลจะเป็นดังที่แสดงด้านล่าง -
ในบทนี้เราจะดูวิธีใช้ RxJ กับ ReactJS เราจะไม่เข้าสู่กระบวนการติดตั้ง Reactjs ที่นี่หากต้องการทราบเกี่ยวกับการติดตั้ง ReactJS โปรดดูลิงค์นี้:https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm
ตัวอย่าง
เราจะดำเนินการโดยตรงกับตัวอย่างด้านล่างซึ่งจะใช้ Ajax จาก RxJS เพื่อโหลดข้อมูล
index.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';
class App extends Component {
constructor() {
super();
this.state = { data: [] };
}
componentDidMount() {
const response = ajax('https://jsonplaceholder.typicode.com/users').pipe(map(e => e.response));
response.subscribe(res => {
this.setState({ data: res });
});
}
render() {
return (
<div>
<h3>Using RxJS with ReactJS</h3>
<ul>
{this.state.data.map(el => (
<li>
{el.id}: {el.name}
</li>
))}
</ul>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" />
<title>ReactJS Demo</title>
<head>
<body>
<div id = "root"></div>
</body>
</html>
เราใช้ ajax จาก RxJS ที่จะโหลดข้อมูลจาก URL นี้ -https://jsonplaceholder.typicode.com/users.
เมื่อคุณรวบรวมการแสดงผลจะเป็นดังที่แสดงด้านล่าง -