是否可以在rxjs6和rxjs6中共享订阅事件？

Question

我有一个简单调用api的服务类。此服务类正在组件中使用。是否有一种使用组件的方法可以知道服务api的订阅何时完成？

现在，我正在从消费组件发送回调函数到服务。回调函数是订阅函数的一个参数，这是我所理解的。

class MyService {
constructor(httpClient: HTTPClient){}
fetchDetails (id, callback) {
 this.http.get('my/api/endpoint/url').subscribe(
  response => {
    // do something with response
  }
  error => { //do some processing for error}
  () => callback() // called when subscribe is done
 )
}
}
class MyList {
 constructor(myservice: MyService){}

 getDetails (id) {
  this.myservice.fetchDetails(id, this.detailsFetched);
 }
 detailsFetched () {
  // subscribe complete
  // do some processing like route to a state
 }
}

这对我来说是可行的，但不知怎么的，我觉得必须有更好的方法来做我想做的事情。因为我是rxjs的新手，所以我无法理解如何实现它。

Answer 1

您的解决方案是正确的，作为另一种选择，我可以建议以更多的声明性RxJS方式来编写类似的东西。

import { HttpClient } from '@angular/common/http';
import { shareReplay, finalize } from 'rxjs/operators';
import { Observable } from 'rxjs';

class MyService {
  constructor(private http: HttpClient) {}

  fetchDetails(id): Observable<any> {
    const stream$ = this.http
      .get(`my/api/endpoint/url/${id}`)
      .pipe(shareReplay());

    stream$.subscribe(
      (response) => {
        console.log(response);
      },
      (error) => {
        console.log(error);
      },
      () => {
        console.log('completed');
      },
    );

    return stream$;
  }
}

class MyList {
  constructor(private myservice: MyService) {}

  private getDetails(id) {
    this.myservice
      .fetchDetails(id)
      .pipe(finalize(() => this.detailsFetched()))
      .subscribe();
  }

  private detailsFetched() {
    // subscribe complete
    // do some processing like route to a state
  }
}

总之，您可以看到，我正在从Observable返回fetchDetails()，这是用shareReplay()创建的。shareReplay()所做的是，它只创建一个网络调用，并将其共享给订阅可观察源的人，那么如果稍后有人在可观察性完成时订阅，它将重播，以便以后的订阅者将收到相同的事件。

还请看一下getDetails，在这里，我使用finalize()运算符来做您想做的事情。当源可观察性完成时，将调用传递给finalize操作符的回调。

Answer 2

您可以在管道中使用rxjs操作符。这样，您只订阅从您可观察到的第一个事件。

fetchDetails (id, callback) {
 this.http.get('my/api/endpoint/url').pipe(take(1)).subscribe(
  response => {
    // do something with response
  }
  error => { //do some processing for error}
  () => callback() // called when subscribe is done
 )
}