訂閱內訂閱：如何在單個訂閱中等待兩者都完成

Question

我是 RXJS 的新手，我有一件事想要實現，但我不知道如何實現。

我有 2 個 API 調用。 但是第二個取決於第一個的值。 問題是我想用一個訂閱來處理兩個調用，所以當兩個訂閱都完成時會觸發 finalize 。 這是我現在的做法，在第一個可觀察完成后觸發 finalize 並且不等待第二個。

private getTemplate(){
this.loading = true;
this.service.getTemplate()
.pipe(
  finalize(() => this.loading = false)
)
.subscribe(
  (response) => {
    if (response) {
       this.createImage(response.link);
    }
  }
)

}

public createImage(link: string) {
this.service.createImage(link)
.subscribe(
  (response) => {
    this.image = response;
  }
)

Answer 1

我會用switchMap處理它

private getTemplate(){
  this.loading = true
  this.a2vService.getNetworkTemplate().pipe(
    filter(response => !!response),
    switchMap(response => this.createImage(response.link)),
    finalize(() => this.loading = false)
  ).subscribe()
}

public createImage(link: string) {
  return this.service.createImage(link).pipe(
    tap(response => {
      this.image = response
    })
  )
)

switchMap將在第一個 observable 發出后執行第二個 observable。 由於兩個 Observable 都在一個pipe()中，因此您也可以將finalize()放在這里，這將在第二個 observable 發射時觸發。

從createImage返回 Observable 也很重要，因此它可以在pipe()中使用。

如您所見，上面的.subscribe()是空的。 我們實際上可以把 finalize 的東西放在這里，它的行為應該是一樣的。

private getTemplate(){
  this.loading = true
  this.a2vService.getNetworkTemplate().pipe(
    filter(response => !!response),
    switchMap(response => this.createImage(response.link))
  ).subscribe(() => {
    this.loading = false
  })
}

---

如何將數據從getNetworkTemplate傳遞給subscribe()回調：

private getTemplate(){
  this.loading = true
  this.a2vService.getNetworkTemplate().pipe(
    filter(response => !!response),
    switchMap(response => 
      combineLatest([of(response), this.createImage(response.link)])
    )
  ).subscribe(([networkTemplateResponse, createImageResponse]) => {
    this.loading = false
  })
}

Answer 2

您可以使用 switchMap 根據第一個流的結果訂閱您的第二個流。 如果第一個響應通過（ if (response) ），您可以使用過濾器來確保僅移動到第二個。

你可以這樣寫：

private getTemplate() {

  this.loading = true;
  this.a2vService.getNetworkTemplate().pipe(

    filter(response => !!response),
    switchMap(resp => this.service.createImage(resp.link)),
    finalize(() => this.loading = false)

  ).subscribe(resp => this.image = resp);
  
}