如何用Observable实现嵌套请求并合并数据？含代码排查

First, let's cover how to translate your async/await Promise logic into RxJS. The go-to operator here is switchMap (use mergeMap if you need to allow multiple concurrent requests, but switchMap is safer for most cases where you only care about the latest response).

RxJS Equivalent to Your Async/Await Code #

Assuming your Promise-based code looks something like this:

async function getParentWithChild() {
  const parent = await fetch('/api/parent').then(res => res.json());
  const child = await fetch(`/api/child/${parent.childId}`).then(res => res.json());
  return { ...parent, child };
}

Here's the RxJS version (using rxjs/fetch; adjust if you're using Angular's HttpClient):

import { switchMap, map } from 'rxjs/operators';
import { fromFetch } from 'rxjs/fetch';

// This Observable will emit the combined parent + child data once both requests complete
const parentWithChild$ = fromFetch('/api/parent').pipe(
  switchMap(parentRes => parentRes.json()),
  switchMap(parentData => 
    fromFetch(`/api/child/${parentData.childId}`).pipe(
      switchMap(childRes => childRes.json()),
      // Merge child data into the parent object
      map(childData => ({ ...parentData, child: childData }))
    )
  )
);

// To get the actual data, you need to subscribe:
parentWithChild$.subscribe({
  next: combinedData => console.log('Combined Data:', combinedData),
  error: err => console.error('Oops, something went wrong:', err),
  complete: () => console.log('Request sequence done!')
});

If you're using Angular's HttpClient, it's even simpler (since it parses JSON automatically):

import { switchMap, map } from 'rxjs/operators';

this.parentWithChild$ = this.http.get('/api/parent').pipe(
  switchMap(parentData => 
    this.http.get(`/api/child/${parentData.childId}`).pipe(
      map(childData => ({ ...parentData, child: childData }))
    )
  )
);

Fixing Edit1: Getting an Observable Instead of Real Data #

If you're seeing an Observable object instead of the actual data, here's what's probably going on:

1. You didn't subscribe to the Observable: Observables are lazy—they won't run until you call .subscribe() or use the async pipe in your template.
   • Quick fix: Either subscribe explicitly in your component code (like the example above), or use Angular's async pipe in your HTML (e.g., {{ parentWithChild$ | async | json }}).
2. You used map instead of switchMap for the second request: Using map here would give you an Observable inside another Observable (Observable<Observable<YourData>>) instead of flattening it into a single stream of data.
   • Fix: Swap map for switchMap when you're returning another Observable (like your child request).

Fixing Edit2: Missing Console Logs #

You said console.log(data) works, but the downstream logs (console.log(value) and console.log("Values: ", values)) don't fire. Let's break down the most likely causes:

1. An error is being swallowed: Even if the child request works when tested alone, if there's an error in the nested pipe (like childId being undefined in the parent data, or a network blip mid-request), the error will stop the stream. Since you probably don't have an error handler, it's failing silently.
   • Fix: Add an error handler to your subscription to see what's going on:

     parentWithChild$.subscribe({
       next: values => console.log("Values: ", values),
       error: err => console.error("Error caught:", err) // This will show the issue!
     });
     

2. You forgot to return the inner Observable: If your switchMap doesn't return the child request Observable, the stream will emit undefined instead of the combined data, which might skip your downstream operators.
   • Wrong code example:

     // ❌ Oops, no return here!
     switchMap(parentData => {
       console.log(data);
       this.http.get(`/api/child/${parentData.childId}`);
     })
     

   • Correct version:

     // ✅ Return the inner Observable
     switchMap(parentData => {
       console.log(data);
       return this.http.get(`/api/child/${parentData.childId}`).pipe(
         map(childData => ({ ...parentData, child: childData }))
       );
     })
     

3. A downstream operator is filtering out the value: Double-check if you have operators like filter or take that might be discarding the emitted data. For example, a filter(value => value.someProperty) that's returning false for your combined data would prevent the logs from firing.

Another quick check: Make sure you're not accidentally using tap instead of map when transforming data—tap doesn't modify the stream, but it shouldn't prevent logs from running.

Content of the question is sourced from Stack Exchange, question author Sesha