Angular2 + RxJSネストされたHTTPコール

Question

おはようございます。私はAngular2の初心者で、私が取り組んでいるプロジェクトでは、RESTバックエンドからデータを取得するためにいくつかのHTTPリクエストを作成する必要があります。

バックエンドから、私はモジュールのリストを取得する必要があります。各モジュールには1つ以上のアクションがあります。 2つのエンティティを表すtypescriptですクラスは、バックアップされたが、相対的なアクションと与えられたモジュールのためのアクションのリストを取得するための第2のエンドポイントなしのモジュールのリストを取得するための呼び出しを公開

export class Module { 

    public name: string; 
    public htmlPath: string; 
    public actions: ModuleAction[]; 

    constructor(data: IModule){ 
     this.name = data.name; 
     this.actions = [];  
     this.htmlPath = data.htmlPath; 
    } 

    addAction(action: ModuleAction): void { 
     this.actions.push(action); 
    } 
} 

export class ModuleAction { 
    private name: string; 

    constructor(data: IModuleAction){ 
     this.name = data.actionName; 
    } 
} 

以下の通りです。私の角度のインターフェイスを初期化するために、モジュールリストを取得するための最初のHTTPリクエストを作成する必要があります。モジュールを取得すると、それぞれのアクションを取得してModuleインスタンスを更新するための2つ目のリクエストをそれぞれ作成する必要があります。

昨日、RxJSを使用してデータを取得しようとしました。私は私が間違ってRxJS演算子を使用していますし、より多くの「対応RxJS」で同じ結果を得るために、さまざまなソリューションが存在しなければならないことはかなり確信している

getModules(type?: string) : Observable<Module[]> { 
    let url = ... 
    console.log("getting modules"); 
    return this.http.get(url) 
     .map(res => { 
      let body = res.json(); 
      let modules = body.map(jsModule => { 
      let m = new Module(jsModule); 
      let url = HttpHandlerService.URL_INFO + '/' + m.htmlPath; 

      console.log("getting actions for module " + m.name); 
      this.http.get(url) 
       .map(response => { 
        let body = response.json(); 
        return body.actions.map(function(a : IModuleAction){ 
        return new ModuleAction(a); 
        }); 
       }) 
       .subscribe(actions => { 
        for(let a of actions) 
        m.addAction(a); 
       }); 
      return m; 
      }); 
      return modules; 
     }) 
     .catch(this.handleError); 
} 

次されていた唯一の作業溶液方法。

同じ結果を得るためにRxJS演算子を使用するにはどうすればよいですか？ ありがとうございました。

Answer 1

Observable.flatMapオペレータを使用して、相互依存するHTTP要求を連鎖させることができます。このポストを参照してください：Angular 2 - Chaining http requests

各モジュールのモジュールアクションを取得する必要があるため、Observable.forkJoin演算子を使用してください。この記事を参照してください。Send multiple HTTP GET requests in parallel

最終的な構造は次のようになります。

Answer 2

いくつかの分離を行い、switchMapを使用しよう：

getModules(type?: string) : Observable<Module[]> { 
    let url = ... 
    console.log("getting modules"); 
    return this.http.get(url) 
     .switchMap(res => { 
      let body = res.json(); 
      return getJsModules(body); 
     }) 
     .catch(this.handleError); 
} 



getJsModules(body){ 
    return body.switchMap(jsModule => { 
      let m = new Module(jsModule); 
      let url = HttpHandlerService.URL_INFO + '/' + m.htmlPath; 

      console.log("getting actions for module " + m.name); 

      return getModuleActions.map(actions => { 
        for(let a of actions) 
         m.addAction(a); 
        }); 
      }); 
} 


getModuleActions(url){ 
    return this.http.get() 
     .switchMap(response => { 
      let body = response.json(); 
      return body.actions.map(function(a : IModuleAction){ 
       return new ModuleAction(a); 
      }); 
     }) 
} 

Answer 3

私はflatMapとforkJoin使用します。

を

this.http.get(url) 
    .flatMap(t=> { 
     let urls = getUrls(t.json()) 
      .map(url=> this.http.get(url).map(t=>getActions(t.json())); 
     return Observable.forkJoin(urls).map(x=> [].concat(...x));   
    } 
//.subscribe => [ModuleAction, ModuleAction, ModuleAction,...] 

getUrls(body:[]): string[] { 
    return body.map(jsModule => { 
     let m = new Module(jsModule); 
     let url = HttpHandlerService.URL_INFO + '/' + m.htmlPath; 
     return url; 
    }; 
} 

getActions(body:any): ModuleAction[] { 
    return body.actions.map((a:IModuleAction) => new ModuleAction(a)); 
}