天天看點

新手都能看懂的關于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);
  },
});
           
新手都能看懂的關于rxjs中的of實作原了解析

關于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);
   },
 });
           
新手都能看懂的關于rxjs中的of實作原了解析

結論

of内部封裝了Observable函數并傳回該函數

subscribe函數其實是執行Observable函數所傳入的函數,并将自己的參數傳入該函數

是以你學會了嗎?