优化api调用rxjs

import { from } from 'rxjs';
import { shareReplay, tap } from 'rxjs/operators';

const apiCall$ = from(fetchDataFromApi()).pipe(
  tap(data => console.log('API called')),
  shareReplay(1)
);

apiCall$.subscribe(data => console.log('Subscriber 1:', data));
apiCall$.subscribe(data => console.log('Subscriber 2:', data)); // 不会再次调用API

import { fromEvent } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

const input = document.querySelector('input');
const input$ = fromEvent(input, 'input').pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(() => fetchDataFromApi())
);

input$.subscribe(data => console.log(data));

import { fromEvent } from 'rxjs';
import { switchMap } from 'rxjs/operators';

const button = document.querySelector('button');
const click$ = fromEvent(button, 'click').pipe(
  switchMap(() => fetchDataFromApi())
);

click$.subscribe(data => console.log(data));

import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';

const apiCall$ = fetchDataFromApi().pipe(
  catchError(error => {
    console.error('Error:', error);
    return of(null); // 返回一个默认值或空Observable
  })
);

apiCall$.subscribe(data => console.log(data));

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

class MyComponent {
  private destroy$ = new Subject<void>();

  ngOnInit() {
    fetchDataFromApi().pipe(
      takeUntil(this.destroy$)
    ).subscribe(data => console.log(data));
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}