Angular 2+ swtichMap 不能正常工作

Question

我有一個按鈕女巫向服務器發出請求。 我正在使用帶有主題的 switchMap 運算符來防止多個掛起的請求。

//service
  public getPhotos(): Observable<any> {
    return this.http.get<any>(`url`)
  }
//component
  private $filterSubject: Subject<void> = new Subject();
  public onFetchNewImage(): void {
    this.$filterSubject
      .pipe(
        switchMap(event => {
          return this.photoFetchService.getPhotos();
        })
      )
      .subscribe((photo) => {
        console.log('url', photo);
      })
      this.$filterSubject.next();
  }

但是，我點擊得越多，我發出的請求就越多，因為每次發出請求時，我的 subject.observables 數組都會變大

這是我的代碼：你可以看到 console.log、 stackblitz

Answer 1

由於您在 click 方法中添加了訂閱，因此每次單擊都會向堆棧添加新的訂閱。您可以通過在 ngOnInit 中移動訂閱代碼來避免這種情況。

嘗試這個：

組件.ts

ngOnInit() {
  this.$filterSubject
      .pipe(
        switchMap(event => {
          return this.photoFetchService.getPhotos();
        })
      )
      .subscribe((photo) => {
        console.log('url', photo);
      })
}

 public onFetchNewImage(): void {  
    this.$filterSubject.next();
  }

Answer 2

您保留$filterSubject ，並且每次單擊都會附加一個帶有photoFetchService.getPhotos()的新 pipe ，並帶有新訂閱，而所有舊訂閱仍然存在。

所以：你點擊一次：訂閱號。 1 觸發，您再次單擊：新訂閱號。 2 起火，第一個也起火......等等。 例如，您可以使用take運算符修復它

    this.$filterSubject
      .pipe(
        switchMap(event => {
          return this.photoFetchService.getPhotos();
        }),
        take(1),
      )
      .subscribe(photo => {
          console.log('url', photo);
      });

或重新考慮建築。