新手都能看懂的关于rxjs中的of实现原理解析

function of(...args): Observable<number> {
	  const observable = new Observable(test);
	  function test(obser: Observer<number>): void {
	    args.forEach((val) => {
	      obser.next(val);
	    });
	  }
	  return observable;
}

let obser = of(1, 2, 3);

obser.subscribe({
  next: (val) => {
    console.log(val);
  },
});

打印的结果

关于Observable的作用

Observable需要传入一个函数1作为参数,函数1需要一个含有next方法的对象2作为参数,而subscribe的作用就是将对象2传递给函数1。那么函数1的执行时机是什么时候呢?不难看出当我们调用subscribe函数时才会执行函数1,所以subscribe的作用是触发函数1并传入一个对象2.

分析rxjs的of

由rxjs中的of返回值可以知道,of返回的是一个observable类型,同时of可以传入一系列的参数,所以我们得在函数1中遍历所有参数并执行next函数。

同理可写出timer的执行过程

function timerself(time): Observable<number> {
	  const observable = new Observable(test);
	  function test(obser: Observer<number>): void {
	    let i = 0;
	    setInterval(() => {
	      obser.next(++i);
	    }, time);
	  }
	  return observable;
}


 let obser = timerself(1000);
 obser.subscribe({
   next: (val) => {
     console.log(val);
   },
 });

在这里插入图片描述

结论

of内部封装了Observable函数并返回该函数
subscribe函数其实是执行Observable函数所传入的函数,并将自己的参数传入该函数

所以你学会了吗?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Young soul2

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值