0%

Rxjs学习笔记

Rxjs学习过程中记录

入门理解

可以用来解决的问题

  • 快速点击页面Tab按钮时返回结果是否渲染在正确位置
    1
    2
    3
    4
    5
    6
    7
    const tabSwitch$ = fromEvent(tab, 'click');

    tabSwitch$.pipe(
    debounceTime(300),
    switchMap((curTab) => from(fetch(`/api/${curTab}`))),
    tap(render),
    ).subscribe();
debounceTimedebounceTime(dueTime: number, scheduler: Scheduler): Observable
  • debounceTime: 接收毫秒数,舍弃掉在两次输出之间小于指定时间的发出值。
  • 舍弃掉在两次输出之间小于指定时间的发出值。
  • 适用场景:搜索栏输入关键词请求后台拿数据,防止频繁发请求。
  • debounceTime 比 debounce 使用更频繁
switchMap
  • 映射成 observable,完成前一个内部 observable,发出值。

  • :bulb: 如果你想要维护多个内部 subscription 的话, 请尝试 mergeMap!

  • :bulb: 此操作符通常被认为是 mergeMap 的安全版本!

  • :bulb: 此操作符可以取消正在进行中的网络请求!

tap- 拦截源上的每个发射并运行一个函数,但是只要不发生错误,就返回与源相同的输出。 - 返回源 Observable 的镜像 Observable,但已对其进行了修改,以便调用提供的 Observer 对源发出的每个值,错误和完成执行副作用。在上述 Observer 或处理程序中引发的任何错误都将沿着输出 Observable 的错误路径安全地发送。 - 该运算符可用于调试 Observable 的正确值或执行其他副作用。 - 注意:这subscribe与 Observable 上的有所不同。如果tap未订阅由返回的 Observable,则 Observer 指定的副作用将永远不会发生。tap因此,仅监视现有执行,就不会触发执行subscribe。

  • 每隔一秒输出数组的一个元素
1
2
3
4
5
6
7
8
9
10
11
12
import { of, interval } from 'rxjs';
import { map, take } from 'rxjs/operators';

const array = ['A', 'B', 'C', 'D', 'E', 'F']

const source = interval(1000)
.pipe(
take(array.length),
map(n => array[n])
)

source.subscribe(x => console.log(x));

什么场景下使用?

  • RxJS 通过了Observable 和操作符,解决了异步编程的模式统一和时序问题,让你的异步代码规范而简洁;
  • RxJS 是用于解决竞态危害问题的。如果你的业务场景中有大量的异步行为,而且它们的执行顺序错乱会导致输出的不正确,这时候就应该考虑引入 RxJS 来规范你的代码了。

重要概念

  • 函数式
  • 相应式

Tips

纯函数

  • 函数的执行过程完全由输入参数决定,不会受到除输入参数以外的影响
  • 函数不会修改任何外部状态,包括全局变量或者修改传入的参数
  • 总结:只拿参数作为参考并创造,不破坏

  我只是记录生活,欢迎来到我的博客!
  如需转载,请咨询作者同意后,标明作者以及出处,谢谢!