Angular2 / rxjs：订阅不触发mergeMaps和forkJoins的Observable表达式

Question

I have a service that has a method that is essentially:

this.backend.getJSON(`${name}/book`).mergeMap(
  book => Observable.forkJoin(book.parts.map((partName: string) =>
    this.backend.getJSON(`${name}/${partName}/part`).mergeMap(
      part => Observable.forkJoin(part.sections.map((sectionName: string) =>
        this.backend.getJSON(`${name}/${partName}/${sectionName}/section`).mergeMap(
          section => Observable.forkJoin(section.chapters.map((chapterName: string) =>
            this.backend.getJSON(`${name}/${partName}/${sectionName}/${chapterName}/chapter`).map(chapter => {
              this.transform(chapter.content, `${name}/${partName}/${sectionName}/${chapterName}`);
              return chapter;
            }))),
          this.assignAndReturn('chapters'))),
      this.assignAndReturn('sections'))))),
  this.assignAndReturn('parts'));

(I've inlined - and slightly simplified - some called methods, which is why it's such a huge expression, and hence the repetition in the getJSON args.)

assignAndReturn is just:

private assignAndReturn<T1, T2>(name: string) {
  return (a: T1, b: T2) => {
    a[name] = b;
    return a;
  };
}

.subscribe(...) ing to this doesn't seem to work. It seems to only get partway down the expression tree, not 'making it' all the way to getting the chapters.

I really don't know what's happening. It's almost as if I need to be subscribing to the 'inner' parts, but then the outer subscription won't fire...

Answer 1

You could try a pattern like this, leveraging flatMap . Once the previous event finishes, flatMap will continue with the Observable returned by it's callback. It helps with readability quite a bit and enables you to spy on your stream along the way.

import { Observable } from 'rxjs';

class Demo {
    backend = {
        // Simulated request
        getJSON: (str, demoValue) => Observable.of(demoValue).delay(new Date(Date.now() + 1000))
    }

    getBook(name) {
        this.backend
            // Get the book
            .getJSON(`${name}/book`, name)
            // Get the parts
            .flatMap(book => { 
                // Observable.from() will create an observable event
                // for each item in the array
                return this.backend
                    .getJSON(`[Next URL]`, [`${book}/part1`, `${book}/part2`])
                    .flatMap(parts => Observable.from(parts));
            })
            // Get the sections
            .flatMap(part => {
                return this.backend
                    .getJSON(`[Next URL]`, [`${part}/section1`, `${part}/section`])
                    .flatMap(sections => Observable.from(sections));
            })
            // Get the chapters
            .flatMap(section => {
                return this.backend
                    .getJSON(`[Next URL]`, [`${section}/chapter1`, `${section}/chapter2`])
                    .flatMap(chapters => Observable.from(chapters));
            })
            // etc.
            .subscribe(console.log)
    }
}

let t = new Demo();
t.getBook('cool');

This outputs:

cool/part1/section1/chapter1
cool/part1/section1/chapter2
cool/part1/section2/chapter1
cool/part1/section2/chapter2
cool/part2/section1/chapter1
cool/part2/section1/chapter2
cool/part2/section2/chapter1
cool/part2/section2/chapter2