RXJS

lastUpdated: 2023-8-10

简介

RxJS 是使用 Observables 的响应式编程的库，它基于观察者模式和迭代器模式，并提供了一套丰富的操作符来处理和转换数据流。

它在使⽤⽅式上，跟 Promise有点像，但在能⼒上⽐ Promise强⼤多了，不仅仅能够以流的形式对数据进⾏控制，还内置许许多多的内置⼯具⽅法让我们能⼗分⽅便的处理各种数据层⾯的操作，让我们的代码如丝⼀般顺滑。

Promise与Rxjs的区别

promise 代码

let promise = new Promise( (resolve) => {
      setTimeout(() => {
          resolve('我是promise');
      },1000)
});
promise.then((value) => {
  console.log(value);
})

Rxjs 代码

let start = new Observable( (observer) => {
  let timeOut = setTimeout( () => {
    observer.next('我是Rxjs');
  },2000)
  
})
let str = start.subscribe( (value) => {
  console.log(value);
})

区别1： rxjs可以取消subscribe，promise不可以

setTimeout( () => {
    str.unsubscribe();
},1000)

区别2： rxjs可以发射多次，promise只能发射一次

let settr2;
let start2 = new Observable( (observable) => {
  let count = 0;
  settr2= setInterval( () => {
    observable.next(count++);
  },1000)
})
let str2 = start2.subscribe( (num) => {
    console.log(num);
    if(num > 10){
      str2.unsubscribe();
      clearInterval(settr2);
    } 
})

区别3： rxjs 自带了许多的工具函数，如filter等

学习 RxJS 操作符 (opens new window)

优势：

• 代码量的⼤幅度减少
• 代码可读性的提⾼
• 很好的处理异步
• 事件管理、调度引擎
• ⼗分丰富的操作符
• 声明式的编程风格
• 欢迎阅读 (opens new window)

Comment area