Quiero llamar al primer servicio para consultar algunos datos (devuelve una serie de resultados) y luego hacer otra llamada a un segundo servicio para obtener más datos para cada uno de esos resultados. Los resultados de cada llamada de servicio deben combinarse, devolverse y mostrarse en una sola lista. Creo que entiendo cómo funciona esa parte.
La parte de la que estaba menos seguro era el requisito de poder mostrar los resultados de la primera llamada de servicio inmediatamente cuando estuviera disponible. La interfaz de usuario debe mostrar indicadores de carga para los campos que provienen de la segunda llamada de servicio antes de que esos datos estén disponibles.
Lo único que se me ocurre es agregar operadores rxjs de "toque" después de la primera llamada de servicio y la segunda llamada de servicio que emiten eventos sobre un nuevo tema y la interfaz de usuario podría escuchar el _documents$ Asunto para mostrar los datos después de la primera llamada y mostrar los datos combinados después de la segunda llamada.
¿Hay mejores prácticas para manejar este escenario? ¿Me estoy perdiendo otro patrón u operador rxjs que haría esto más simple?
_documents$: BehaviorSubject<DocumentSearchSomething[]> = new BehaviorSubject([]); private documentSearchQuery$ = new Subject<string>(); constructor(private store: Store, private http: HttpClient) { this.documentSearchQuery$.pipe( switchMap((query) => { return this.http.get<any[]>(`https://my_api.com/service_1?q=${encodeURIComponent(query)}`) .pipe( tap(service_1_results => this._documents$.next(service_1_results)), switchMap(service_1_results => { // make call to service 2 to get more data for each result, pass in id of every result return this.http.post<any[]>(`https://my_api.com/service_2`, { ids: service_1_results.map(r => r.id) }).pipe( map(service_2_results => { // combine service_1_results with service_2_results const combined = service_1_results.map(r1 => { const r2 = service_2_results.find(c => c.id === r1.id); return {...r1, ...r2}; }); return combined; }), tap(combined_results => this._documents$.next(combined_results)) ); }) ); }), ).subscribe(); }Sí, hay un operador que puede usar para simplificar esto. Dado que esta tubería configura un observable interno (que da como resultado la emisión de los valores combinados), puede usar startWith() para emitir inmediatamente el valor del servicio uno desde el observable interno.
_documents$: Observable<DocumentSearchSomething[]>; private documentSearchQuery = new Subject<string>(); constructor(private store: Store, private http: HttpClient) { this._documents$ = this.documentSearchQuery.pipe( switchMap(query => this.http.get<any[]>(`https://my_api.com/service_1?q=${encodeURIComponent(query)}`)), switchMap(serviceOne => this.HTMLOutputElement.post<any[]>(`https://my_api.com/service_2`, { ids: serviceOne.map(r => r.id) }).pipe( map(serviceTwo => serviceOne.map(r1 => { const r2 = serviceTwo.find(c => c.id === r1.id); return { ...r1, ...r2 }; })), startWith(serviceOne) )) ); }¿Algo como esto?
private documentSearchQuery$ = new Subject<string>(); private documents1$: Observable<DocumentSearchSomething[]> = this.documentSearchQuery$.pipe( switchMap((query) => this.http.get<DocumentSearchSomething[]>( `https://my_api.com/service_1?q=${encodeURIComponent(query)}` ) ), shareReplay({ bufferSize: 1, refCount: true }) ); private documents2$: Observable<DocumentSearchSomething[]> = this.documents1$.pipe( switchMap((res) => this.http.post<any[]>(`https://my_api.com/service_2`, { ids: res.map((r) => r.id), }) ), shareReplay({ bufferSize: 1, refCount: true }) ); private combinedResults$ = combineLatest([documents1$, documents2$]).pipe( map(([res1, res2]) => res1.map((r1) => { const r2 = res2.find((c) => c.id === r1.id); return { ...r1, ...r2 }; }) ) );Si está manejando una respuesta de matriz con una longitud arbitraria y necesita detalles para cada elemento en la respuesta, entonces, sin tener que entrar en una configuración más avanzada de seguimiento de índice, Sujetos y Observables combinados, podría intentar algo como esto:
https://stackblitz.com/edit/angular-ivy-ae7sdt?file=src/app/app.component.ts
En este ejemplo, se agrega una clave de details a cada elemento en la matriz de respuesta esperada. Esta propiedad está asignada a un Observable con un valor inicial que indica que se está cargando.
this.todos$ = this.getTodos().pipe( map((todos: Todo[]) => todos.map(todo => ({ ...todo, details: this.getTodo(todo.id).pipe( startWith({ completed: 'loading' }), map(resp => String(resp.completed)) ) })) ) );Luego, en la plantilla, usaría la canalización asíncrona para enlazar con el resultado. No creo que esta sea la mejor práctica, pero para una solución breve y fácil debería funcionar.
Una respuesta más robusta sería usar un BehaviorSubject con una matriz y un observable que expusiera su valor. Esta matriz se asignaría a los detalles adicionales de cada elemento de la matriz principal. Luego podría iterar sobre ambos en la plantilla de esta manera:
<ng-container *ngIf="{ todos: todos$ | async, todoDetails: todoDetails$ | async } as state "> <div *ngFor="let todo of state.todos; let i =index"> {{ todo.title }} {{ state.todoDetails[i] }} </div> </ng-container>