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

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

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

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的新手，我无法理解如何实现它。

您可以使用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
 )
}

---

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

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
 )
}

---

您的解决方案是正确的，作为替代方案，我可以建议使用更具声明性的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
  }
}

从'@angular/common/http'导入{HttpClient}；
从“rxjs/operators”导入{shareReplay，finalize}；
从“rxjs”导入{Observable}；
类MyService{
构造函数（私有http:HttpClient）{}
获取详细信息（id）：可观察{
const stream$=this.http
.get（`my/api/endpoint/url/${id}`）
.pipe（shareReplay（））；
流$.subscribe(
（回应）=>{
控制台日志（响应）；
},
（错误）=>{
console.log（错误）；
},
() => {
console.log（'completed'）；
},
);
返回流$；
}
}
类MyList{
构造函数（私有myservice:myservice）{}
私人信息（id）{
这是我的服务
.fetchDetails（id）
.pipe（完成（（）=>此.detailsFetched（））
.subscribe（）；
}
私有详细信息蚀刻（）{
//订阅完成
//执行一些处理，比如路由到一个状态
}
}

总而言之，您可以看到我正在从

fetchDetails（）

返回

Observable

，这是使用

shareReplay（）

创建的。

shareReplay（）

所做的是，它只创建一个网络调用，并将其共享给订阅源observable的用户，然后如果有人在observable完成后订阅，它将进行重播，以便稍后的订阅方将收到相同的事件

---

另外，请看一下

getDetails

，在这里我使用

finalize（）

操作符来完成您想要的操作传递给finalize操作符的回调将在源可观察对象完成时调用。

您的解决方案是正确的，作为替代方案，我可以建议使用更具声明性的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
  }
}

从'@angular/common/http'导入{HttpClient}；
从“rxjs/operators”导入{shareReplay，finalize}；
从“rxjs”导入{Observable}；
类MyService{
构造函数（私有http:HttpClient）{}
获取详细信息（id）：可观察{
const stream$=this.http
.get（`my/api/endpoint/url/${id}`）
.pipe（shareReplay（））；
流$.subscribe(
（回应）=>{
控制台日志（响应）；
},
（错误）=>{
console.log（错误）；
},
() => {
console.log（'completed'）；
},
);
返回流$；
}
}
类MyList{
构造函数（私有myservice:myservice）{}
私人信息（id）{
这是我的服务
.fetchDetails（id）
.pipe（完成（（）=>此.detailsFetched（））
.subscribe（）；
}
私有详细信息蚀刻（）{
//订阅完成
//执行一些处理，比如路由到一个状态
}
}

总而言之，您可以看到我正在从

fetchDetails（）

返回

Observable

，这是使用

shareReplay（）

创建的。

shareReplay（）

所做的是，它只创建一个网络调用，并将其共享给订阅源observable的用户，然后如果有人在observable完成后订阅，它将进行重播，以便稍后的订阅方将收到相同的事件

---

另外，请看一下

getDetails

，在这里我使用

finalize（）

操作符来完成您想要的操作传递给finalize运算符的回调将在源可观察对象完成时调用。

感谢您的响应，但我不确定这对原因有何帮助。基本上我想做的是

this.myservice.fetchDetails（id）.subscribe（完成=>{//subscribe完成了，在这里做你的工作}）

现在对我来说唯一的方法就是发送一个回调函数，当fetchDetails完成时将调用它。感谢您的响应，但我不确定这对原因有什么帮助。基本上我想做的是

this.myservice.fetchDetails（id）.subscribe（完成=>{//subscribe完成了，在这里做你的工作}）

现在唯一能帮我做的就是发送一个回调函数，当fetchDetails完成时会调用它。Goga Koreli感谢你的回复。我读过关于shareReplay的文章，但后来我想可能还有其他可用的东西。我认为分享承诺应该很容易。Goga Koreli感谢你的回复。我读过关于shareReplay的文章，但后来我想可能还有其他可用的东西。我认为分享承诺应该很容易。