在复杂的,频繁的异步请求场景,使用rxjs。
在依赖的多个异步数据,决定渲染的情景,使用rxjs。
总之:在前台频繁的、大量的、和后台数据交互的复杂项目里面,使用rxjs(web端,iOS,android端等,客户端都可考虑使用)
数据和数据观察者的绑定。数据变化,观察者动作——监听或者观察者模式。
观察者的迭代执行动作——观察者注册任意个异步或同步动作,迭代执行。
hello world
let start = Rx.Observable.create((observer) => {
observer.next(‘hello world‘)
});
start.subscribe((a) => {
console.log(a)
})
# >>>
hello world
subject(主体)
subject像是维护着一个监听者的注册表。
当有新的事件发生时,广播给各个监听者。
Schedulers (调度器)
先不管,目前没用到,也不影响使用
1
let firstObservable = Rx.of(‘one‘, ‘two‘);
firstObservable.subscribe((a) => {
console.log(a)
})
firstObservable.subscribe((a) => {
console.log(a+‘-222‘)
})
# >>>
one
two
one-222
two-222
2
let secondObservable = Rx.Observable.create((data) => {
let a = 0;
//模拟异步请求
setInterval(() => {
data.next(a)
a += 1
}, 1000)
});
console.log(‘just before subscribe‘);
secondObservable.subscribe((a) => {
console.log(a + ‘11‘)
});
secondObservable.subscribe({
next: x => console.log(‘got value ‘ + x),
error: err => console.error(‘something wrong occurred: ‘ + err),
complete: () => console.log(‘done‘),
});
console.log(‘just after subscribe‘);
# >>>
just before subscribe
just after subscribe
011
got value 0
111
got value 1
211
got value 2
311
got value 3
...
3, subject
let firstObservable = Rx.of(‘one‘, ‘two‘);
firstObservable.subscribe((a) => {
console.log(a)
});
firstObservable.subscribe((a) => {
console.log(a+‘-222‘)
})
var subject = new Rx.Subject();
subject.subscribe({
next: (v) => console.log(‘observerA: ‘ + v)
});
subject.subscribe({
next: (v) => console.log(‘observerB: ‘ + v)
});
subject.next(1);
subject.next(2);
#>>>
one
two
one-222
two-222
observerA: 1
observerB: 1
observerA: 2
observerB: 2
监听input输入框得变化,控制处理动作的流动或者规则
var input = Rx.Observable.fromEvent(document.querySelector(‘input‘), ‘input‘);
// 过滤掉小于3个字符长度的目标值
input.filter(event => event.target.value.length > 2)
.map(event => event.target.value)
.subscribe(value => console.log(value));
//延迟200毫秒
input.delay(200)
.map(event => event.target.value)
.subscribe(value => console.log(value));
//一秒内触发一次
input.throttleTime(1000)
.map(event => event.target.value)
.subscribe(value => console.log(‘一秒内触发一次-throttleTime‘ + value));
// 停止输入后200ms方能通过最新的那个事件
input.debounceTime(1000)
.map(event => event.target.value)
.subscribe(value => console.log(‘停止输入1000毫秒后-debounceTime‘ + value));
//处理三次后停止
input.take(3)
.map(event => event.target.value)
.subscribe(value => console.log(‘3次事件后停止流‘ + value));
// 直到其他 observable 触发事件才停止事件流
var stopStream = Rx.Observable.fromEvent(document.querySelector(‘button‘), ‘click‘);
input.takeUntil(stopStream)
.map(event => event.target.value)
.subscribe(value => console.log(‘button‘ + value)); // "hello" (点击才能看到)
//输入 hello world
var input = Rx.Observable.fromEvent(document.querySelector(‘input‘), ‘input‘);
// 传递一个新的值
input.map(event => event.target.value)
.subscribe(value => console.log(‘map‘+value));
// 通过提取属性传递一个新的值---将对象的一个值提取出来
input.pluck(‘target‘, ‘value‘)
.subscribe(value => console.log(‘pluck‘+value));
// 传递之前的两个值
input.pluck(‘target‘, ‘value‘).pairwise()
.subscribe(value => console.log(‘pluck/pairwise‘+value)); // ["h", "he"]
// 只会通过唯一的值--一次输出一个且历史上重复输入,不会输出。
input.pluck(‘data‘).distinct()
.subscribe(value => console.log(‘distinct‘+value)); // "helo wrd"
// 不会传递重复的值,上一个和当前值
input.pluck(‘data‘).distinctUntilChanged()
.subscribe(value => console.log(‘distinctUntilChanged‘+value)); // "helo world"
rxjs使用的是纯函数。但是应用是有状态的,可以使用scan来累计状态
var button = document.querySelector(‘button‘);
Rx.Observable.fromEvent(button, ‘click‘)
// 对流进行 scan (reduce) 操作,以获取 count 的值
.scan(count => count + 1, 0)
// 每次改变时都在元素上设置 count
.subscribe(count => document.querySelector(‘#count‘).innerhtml = count);
//使用merge将多个observables 合并在一起,监听处理
var increaseButton = document.querySelector(‘#increase‘);
var increase = Rx.Observable.fromEvent(increaseButton, ‘click‘)
// 我们再一次映射到一个函数,它会增加 count
.map(() => state => Object.assign({}, state, {count: state.count + 1}));
var decreaseButton = document.querySelector(‘#decrease‘);
var decrease = Rx.Observable.fromEvent(decreaseButton, ‘click‘)
// 我们还是映射到一个函数,它会减少 count
.map(() => state => Object.assign({}, state, {count: state.count - 1}));
var inputElement = document.querySelector(‘#input‘);
var input = Rx.Observable.fromEvent(inputElement, ‘keypress‘)
// 我们还将按键事件映射成一个函数,它会产生一个叫做 inputValue 状态
.map(event => state => Object.assign({}, state, {inputValue: event.target.value}));
// 我们将这三个改变状态的 observables 进行合并
var state = Rx.Observable.merge(
increase,
decrease,
input
).scan((state, changeFn) => changeFn(state), {
count: 0,
inputValue: ‘‘
});
// 我们订阅状态的变化并更新 dom
state.subscribe((state) => {
document.querySelector(‘#count‘).innerHTML = state.count;
document.querySelector(‘#hello‘).innerHTML = ‘Hello ‘ + state.inputValue;
});
来自:https://www.cnblogs.com/panfengde/p/10132539.html
本文使用的是angular6内置的rxjs,concat:通过顺序地发出多个 Observables 的值将它们连接起来,一个接一个的。count计算源的发送数量,并当源完成时发出该数值。
什么是主题?RxJS 主题就是一个特性类型的 Observable 对象,它允许值多路广播给观察者(Observers)。当一个简单的 Observable 是单播的(每个订阅的观察者它们自己都依赖 Observable 的执行)时候,主题(Subjects)就是多播的。
RxJS 的操作符(operators)是最有用的,尽管 Observable 是最基本的。操作符最基本的部分(pieces)就是以申明的方式允许复杂的异步代码组合简化。操作符是函数。这里有两种操作符:
调度是数据结构。它知道怎样在优先级或其他标准去存储和排队运行的任务,调度器是一个执行上下文。它表示任务在何时何地执行(例如,立即或是在回调机制中如 setTimeout 或 process.nextTick,又或是动画框架)
RxJS 是一个响应式的库,它接收从事件源发出的一个个事件,经过处理管道的层层处理之后,传入最终的接收者,这个处理管道是由操作符组成的,开发者只需要选择和组合操作符就能完成各种异步逻辑,极大简化了异步编程
作为一名 Angular 开发人员,您可能会发现以下 RxJS 运算符在您的日常开发中很有用:map():此运算符用于转换可观察对象发出的值。它以一个函数作为参数,它接收发出的值作为输入并返回转换后的输出
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!