Rxjs combineLatest 确实在订阅中返回了 observable

Question

I am trying to get Userid and serviceId after I need to get a call based on the userid,serviceId problem here is it's not returning the observable to the ts.

Service.ts

function getData():observable<any>{
   combineLatest([
      this.activeSellService.getActiveSellServiceId(),
      this.authService.getUserId(),
    ]).subscribe(([serviceId, userId]) => {
      if (serviceId&& userId) {
        const Url =
          'users/' +
          `${userId}` +
          '/services/' +
          `${serviceId}` +
          '?value=test
        return this.http.get<any>(this.endPoint.getUrl(encodeURI(Url)));
      }
    })
}

Component.ts:

 this.service.getData().subscribe(data=>{console.log(data));

Even its not print the data in the console because the service is not returning observable. kindly help me out with this problem. else can we go with different solutions in rxjs?

Answer 1

try this out

function getData():observable<any>{
   return combineLatest(
      this.activeSellService.getActiveSellServiceId(),
      this.authService.getUserId(),
    ).pipe(mergeMap([serviceId, userId]) => {
      if (serviceId && userId) {
        const Url =
          'users/' +
          `${userId}` +
          '/services/' +
          `${serviceId}` +
          '?value=test
        return this.http.get<any>(this.endPoint.getUrl(encodeURI(Url)));
      }
    })
}

note on the arguments of combinelatest and there is not subscription in getData

eg in stackblitz:

https://stackblitz.com/edit/angular-rxjs-combinelatest-hjyfa6?file=src/app/app.component.ts

Answer 2

You'd need to use a higher order mapping operator like switchMap to map from one observable to another. Moreover, the subscribe() function takes only callbacks and returns only the Subscription object that contains the subscription.

Also you aren't returning anything if the if condition fails. You could return an observable like RxJS constant EMPTY that immediately completes the subscription if the condition fails.

Furthermore

1. observable<any> must be Observable<any>
2. You aren't returning from the function yet.
3. The function keyword isn't required in Typescript. Instead you could mention the scope identifier.
4. You're mixing string concatenation with template literals. Although there isn't syntactically wrong with it, I'd say it's better to stick with either or the other.
5. Guessing from the context of the function, I believe you wish to make the request once and be done with it. Instead of a stream of data provided by combineLatest . In that case you could use forkJoin instead. However note that forkJoin only emits when all it's sources complete.

Try the following

import { Observable, forkJoin, EMPTY } from 'rxjs';
import { switchMap } from 'rxjs/operators';

public getData(): Observable<any> {
  return forkJoin([
    this.activeSellService.getActiveSellServiceId(),
    this.authService.getUserId(),
  ]).pipe(
    switchMap(([serviceId, userId]) => {
      if (!!serviceId && !!userId) {
        const Url = `users/${userId}/services/${serviceId}?value=test`;
        return this.http.get<any>(this.endPoint.getUrl(encodeURI(Url)));
      } else {
        return EMPTY;
      }
    })
  );
}