學(xué)好 RxJS 的關(guān)鍵是對 Operators (操作符)的靈活使用昭殉,操作符大多是純函數(shù),我們使用操作符創(chuàng)建藐守,轉(zhuǎn)換挪丢,過濾,組合卢厂,錯誤處理乾蓬,輔助操作 Observables。具體參見
不同的操作符有不同的使用場景慎恒,有些名字容易混淆任内,可以對比的學(xué)習(xí)。
下面介紹幾個可以創(chuàng)建 Observable 的運算符融柬,具體的介紹請問官網(wǎng)
例子:https://codepen.io/mafeifan/pen/eQKNvN
const {from, of, range, interval, timer, empty} = rxjs;
function f() {
return from(arguments);
}
const observer = {
next: value => {
console.log('Next: ' + value);
},
error: error => {
console.log('Error:', error);
},
complete: () => {
console.log('Complete');
}
}
// Array Like Object
f(1, 2, 3).subscribe(observer);
// string
// from 接收數(shù)組
// 如果是字符串死嗦,會打印每一個字符
from('foo').subscribe(observer);
// Set, any iterable object
const s = new Set(['foo', window]);
from(s).subscribe(observer);
// Promise
const source = from(new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello RxJS!');
},3000)
}));
source.subscribe(observer);
// 傳啥輸出啥
/*
Next: 1
Next: 2
Next: 3
*/
of(1, 2, 3).subscribe(observer);
// Next: 4,5,6
of([4, 5, 6]).subscribe(observer);
// https://rxjs-dev.firebaseapp.com/api/index/function/range
// 從10開始遞增+1連續(xù)發(fā)射兩次, 輸出 10, 11
/*
Next: 10,
Next: 11
*/
range(10, 2).subscribe(observer);
// 從0開始計數(shù)粒氧,每間隔num ms秒發(fā)射一次
const num = 1000;
interval(num).subscribe(observer);
// 延遲2秒發(fā)射
timer(2000).subscribe(observer);
// 不會執(zhí)行 next越除,直接執(zhí)行 complete
empty().subscribe({
next: () => console.log(`empty`),
complete: () => console.log('empty Complete!')
});
// 延遲5秒發(fā)射, 間隔1秒發(fā)射一次
const subscription = timer(5000, 1000).subscribe(observer);