在 Angular 中使用 RXJS 从单个组件上的多个服务中获取数据

Question

I have two services with

ser1.

  getdata1() {
    this.http.get<{message:string,Data1:any}>('http://localhost:3000/api/1')
      .pipe(map((data1)=>{
        return Data1.Data1.map(data=>{
          return  {
            id: data._id,
            data1Title:data1.data1Title,
          }
        })
      })).subscribe((data1) => {
        this.data1=data1
        this.serv1Subject.next([...this.data1])
      })
  }

  getData1Listener() {
    return this.serv1Subject.asObservable()
  }

ser2

  getdata2() {
    this.http.get<{message:string,Data2:any}>('http://localhost:3000/api/2')
      .pipe(map((data2)=>{
        return Data2.Data2.map(data=>{
          return  {
            id: data._id,
            data2Title:data2.data1Title,
          }
        })
      })).subscribe((data2) => {
        this.data2=data2
        this.serv2Subject.next([...this.data2])
      })
  }

  getData2Listener() {
    return this.serv2Subject.asObservable()
  }

Now on componentx i need to fetch the data1 and data2 in nginit and after the data is available need to perform an functionY

How can i use subscribe to trigger an functionY?

In componentx.ts

ngOnInit() {
    this.Service1OberableSubject = this.serv1.getData1Listener().subscribe((data1) => {
      this.data1 = data1;
    })
    this.Service2OberableSubject = this.serv2.getData2Listener().subscribe((data2) => {
      this.data2 = data2;
    })
    this.serv1.getdata1()
    this.serv2.getdata2()
  }

Answer 1

Possibly something like this. Use tap to tap into the response and do anything needed. And forkJoin will merge the response and give it in an array, the first index will the be response of the first observable that was passed in.

getdata1() {
    this.http.get<{message:string,Data1:any}>('http://localhost:3000/api/1').pipe(
        map((data1)=>{
            return Data1.Data1.map(data=>{
              return {
                id: data._id,
                data1Title:data1.data1Title,
              }
            })
        }),
        tap((data1)=>{
            //save to data1 if needed
            this.serv1Subject.next([...this.data1]))
        })
    )
}

getdata2() {
    this.http.get<{message:string,Data2:any}>('http://localhost:3000/api/2').pipe(
        map((data2)=>{
            return Data2.Data2.map(data=>{
                return  {
                    id: data._id,
                    data2Title:data2.data1Title,
                }
            })
        }),
        tap((data2)=>{
            //save to data2 if needed
            this.serv2Subject.next([...this.data2]))
        })
    )
}


forkJoin(
    getdata1(),
    getdata2()
).subscribe((x:any[])=>this.functionY(x));
  
functionY([a, b]){
    console.log({a: a,b: b});
}

Answer 2

Here's an example of how you can have if implemented:

import { zip } from 'rxjs';
import { first } from 'rxjs/operators';

ngOnInit() {

  this.serv1.getdata1()
  this.serv2.getdata2()

  zip(this.serv1.getData1Listener(), this.serv2.getData2Listener())
  .pipe(first())
  .subscribe(([data1, data2]) => {
     this.data1 = data1;
     this.data2 = data2;

     functionY(data1, data2)
  })

}

Answer 3

You can use forkJoin from rxjs .

import { forkJoin } from 'rxjs';

component.ts

ngOnInit() {
  forkJoin([this.serv1.getData1Listener(), this.serv2.getData2Listener()]).subscribe(data => {
    this.data1 = data[0];
    this.data2 = data[1];

  });
}

Answer 4

forkJoin should be the best operator in this scenario. It is equally important to understand other higher order operators, this will help to know when to use those. For eg

concatMap — helps to map observables in sequence while waiting for previous observable to complete. The best use case would be a sequential form save.

mergeMap — helps mapping of observables running in parallel. All the previous Observables are kept alive.

switchMap — switchMap is the way to go if we want to cancel previous subscriptions. Type-ahead feature is best implemented using switchMap combined with deboundTime() and distinctUntilChanged().

exhaustMap — used for ignoring newly emitted values till ongoing observable is complete. Best used when we are saving data on click of a button, which has a probability of being clicked multiple times.