可以理解RxJS是js事件界的lodash。
cdn：
<script src="https://cdn.bootcdn.net/ajax/libs/rxjs/7.5.5/rxjs.umd.min.js"></script>
Es6
npm install vue vue-rx rxjs --save import Vue from 'vue' import VueRx from 'vue-rx' Vue.use(VueRx)
简单案例：
一次声明多个异步代码
// stream$尾部的$是表示当前这个变量是个ovservable
const stream$ = new rxjs.Observable.create(subscriber => {
setTimeout(() => {
subscriber.next([1, 2, 3]);
}, 500);
setTimeout(() => {
subscriber.next({ a: 1000 });
}, 1000);
setTimeout(() => {
subscriber.next("end");
}, 3000);
setTimeout(() => {
subscriber.complete();
}, 2000);
});
// 启动流
const subscription = stream$.subscribe({
complete: () => console.log("done"),
next: v => console.log(v),
error: () => console.log("error")
});
// [1,2,3] // 500ms时
// {a:1000} // 1000ms时
// end // 3000ms时
// done // 4000ms时
执行顺序
var observable = rxjs.Observable.create(function (observer) {
observer.next(1);
observer.next(2);
observer.next(3);
setTimeout(() => {
observer.next(4);
observer.complete();
}, 1000);
});
console.log('just before subscribe');
observable.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
//got value 1
//got value 2
//got value 3
//just after subscribe //后面代码会继续执行
//got value 4
//done
complete()后的代码不执行
var observable = Rx.Observable.create(function subscribe(observer) {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete(); //一旦执行complete，就结束了
observer.next(4); // 因为违反规约，不会执行
});
中途停止
var observable = rxjs.Observable.create(function (observer) {
observer.next(1);
observer.next(2);
observer.next(3);
setTimeout(() => {
observer.next(4);
}, 1000);
setTimeout(()=>{
observer.complete();
},2000)
});
var run = observable.subscribe({
next: x => console.log('got value ' + x),
error: err => console.error('something wrong occurred: ' + err),
complete: () => console.log('done'),
});
setTimeout(()=>{
run.unsubscribe()
},1500)
//got value 1
//got value 2
//got value 3
//got value 4
外部调用：
var subject = new rxjs.Subject();
document.getElementById('x').onclick=function (){
subject.next(1);
}
setTimeout(()=>{
subject.next(2);
},1000)
subject.subscribe({
next: (v) => console.log('值: ' + v)
});
rxjs整合vue插件vue-rx官网：https://github.com/vuejs/vue-rx
vue-rx案例：https://blog.csdn.net/kuangshp128/article/details/81561307
