时间戳

首页 > 解决方案 > 使用 RxJS Observables 的单次成功回调

javascript - 使用 RxJS Observables 的单次成功回调

问题描述

如何在允许每个可观察对象拥有自己的成功/错误块的同时，使用可观察对象进行单个成功回调？我有一个需要进行的 AJAX 调用的动态列表，并且每个调用都需要它在回调方法上。在每次 AJAX 调用完成后，我还希望有一个回调方法。我试过使用zip，但 AJAX 调用被调用了两次。

例子：

var possibleRequest1 = Observable.create(() => {}).subscribe(_ => {
    //Must have a success callback
});
var possibleRequest2 = Observable.create(() => {}).subscribe(_ => {
    //Must have a success callback
});
var possibleRequest3 = Observable.create(() => {}).subscribe(_ => {
    //Must have a success callback
});

//User 1 might need to make requests 1 and 2
var dynamicRequstList = [possibleRequest1, possibleRequest2];
//User 2 might need to make all three requests
var dynamicRequstList = [possibleRequest1, possibleRequest2, possibleRequest3];

zip(...dynamicRequestList)
.subscribe(() => {
    //Need a callback after all requests are complete.
});

标签： javascriptangulartypescriptrxjs

解决方案

您可以使用rxjs中的 forkJoin。这里示例如何在您的问题示例中使用 forkJoin。

服务.ts

constructor(private http: HttpClient) { }

requestList1$ = new Subject();
requestList2$ = new Subject();

getDynamicRequstList1() {
    forkJoin(
      this.getItems1(),
      this.getItems2()
    ).subscribe(res => this.requestList1$.next(res));
}

getDynamicRequstList2() {
    forkJoin(
      this.getItems1(),
      this.getItems2(),
      this.getItems3()
    ).subscribe(res => this.requestList2$.next(res));
}  

getItems1(): Observable<any> {
    return of({
      item1: 'Item 1'
    });
}  

getItems2(): Observable<any> {
    return of({
      item1: 'Item 2'
    });
  }  

getItems3(): Observable<any> {
    return of({
      item1: 'Item 3'
    });
}

组件.ts

constructor(private service: AppService) { }

ngOnInit() {
  this.service.requestList1$.subscribe(res => console.log('RES 1:::', res))
  this.service.requestList2$.subscribe(res => console.log('RES 2:::', res))
}

推荐阅读