RxJS 之于异步，就像 JQuery操作dom一样操作event事件

可以理解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)
  });

中文官网：https://cn.rx.js.org/

rxjs整合vue插件vue-rx官网：https://github.com/vuejs/vue-rx

vue-rx案例：https://blog.csdn.net/kuangshp128/article/details/81561307