Observableを使ってhttpリクエストを複数実行する方法を確認しました。
※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認）
※目次をクリックすると目次の下部にコンテンツが表示されます。
3つのhttpリクエストをチェインして実行
１）ライブラリ、サービス、依存性の指定
こちらの記事参照 Angular2でHTTPでサーバーからJSONデータ取得
Angular2のHTTPクライアントはObservableをリターンします。ObservableのflatMapメソッドを使ってHTTPクライアントをチェーンして実行しています。
※ObservableのflatMapメソッド
例）３つのhttpリクエストを順番に実行
こちらの記事参照 Angular2でHTTPでサーバーからJSONデータ取得
Angular2のHTTPクライアントはObservableをリターンします。ObservableのflatMapメソッドを使ってHTTPクライアントをチェーンして実行しています。
※ObservableのflatMapメソッド
例）３つのhttpリクエストを順番に実行
chain() {
this._http.get("/wp/q_chain_server.php?first=5")
.do((res1) => {
this._results1.push(res1.text());
})
.flatMap(() => {
return this._http.get("/wp/q_chain_server.php?second=1")
.do((res2) => {
this._results1.push(res2.text());
})
})
.flatMap(() => {
return this._http.get("/wp/q_chain_server.php?third=3")
.map((res3) => {
this._results1.push(res3.text());
return this._results1;
})
})
.subscribe(res => this.results1 = res);
}
3つのhttpリクエストをパラレルに実行
ObservableのforkJoinを使って、3つのhttpリクエストをパラレルに実行し、実行結果を集約してリターンしています。
※ObservableのforkJoinメソッド
例）３つのhttpリクエストを集約してまとめて実行
※ObservableのforkJoinメソッド
例）３つのhttpリクエストを集約してまとめて実行
para() {
Observable.forkJoin(
this._http.get("/wp/q_chain_server.php?first=5")
.map((res) => res.text()),
this._http.get("/wp/q_chain_server.php?second=1")
.map((res) => res.text()),
this._http.get("/wp/q_chain_server.php?third=3")
.map((res) => res.text())
).subscribe(res => this.results2 = res );
}
デモ
①３つのhttpリクエストをチェインして実行
３つのhttpリクエストを１つずつ順番に実行し、１つのhttpリクエストの実行結果取得後に次のhttpリクエストを実行。
②３つのhttpリクエストパラレルに実行し、結果を集約して表示
３つのhttpリクエストを結果の取得を待たずに続けて実行し、３つのhttpリクエストの実行結果を取得した段階で３つ結果を順番に集約して結果表示。
③httpリクエストをループ処理
1つ目のhttpリクエストで配列データ取得。取得した配列データを使ってループ処理で動的にhttpリクエストの配列を生成し、このhttpリクエストの配列をObservableのforkJoinに渡して実行。
●デモ
Angular : 4.4.3（2.0.0でも動作確認済み）
Bootstrap : 3.x
関連記事の目次
３つのhttpリクエストを１つずつ順番に実行し、１つのhttpリクエストの実行結果取得後に次のhttpリクエストを実行。
②３つのhttpリクエストパラレルに実行し、結果を集約して表示
３つのhttpリクエストを結果の取得を待たずに続けて実行し、３つのhttpリクエストの実行結果を取得した段階で３つ結果を順番に集約して結果表示。
③httpリクエストをループ処理
1つ目のhttpリクエストで配列データ取得。取得した配列データを使ってループ処理で動的にhttpリクエストの配列を生成し、このhttpリクエストの配列をObservableのforkJoinに渡して実行。
●デモ
Angular : 4.4.3（2.0.0でも動作確認済み）
Bootstrap : 3.x
<html>
<head>
<title>Angular 2 Demo</title>
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
<script src="https://npmcdn.com/systemjs@0.19.39/dist/system.src.js"></script>
<script src="./js/systemjs.config.js"></script>
<script>
System.import('./ts/app.ts').catch(function(err){ console.error(err); }); </script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="container">
<my-app>Loading...</my-app>
</div>
</body>
</html>
（systemjs.config.js）
(function (global) {
var ngVer = '@4.4.3';
System.config({
transpiler: 'ts',
typescriptOptions: {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"strict": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'app': 'app',
'@angular/animations': 'npm:@angular/animations' + ngVer + '/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + ngVer + '/bundles/animations-browser.umd.js',
'@angular/core': 'npm:@angular/core' + ngVer + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + ngVer + '/bundles/common.umd.js',
'@angular/common/http': 'npm:@angular/common' + ngVer + '/bundles/common-http.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + ngVer + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + ngVer + '/bundles/platform-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + ngVer + '/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + ngVer + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + ngVer + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router' + ngVer + '/bundles/router.umd.js',
'@angular/router/upgrade': 'npm:@angular/router' + ngVer + '/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms' + ngVer + '/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade' + ngVer + '/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade' + ngVer + '/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs@5.0.1',
'tslib': 'npm:tslib/tslib.js',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js',
'typescript': 'npm:typescript@2.3.2/lib/typescript.js',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts',
meta: {
'./*.ts': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { HttpModule } from '@angular/http';
import { Http } from '@angular/http';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/observable/forkJoin';
import {Observable} from 'rxjs/Observable';
@Component({
selector: 'my-app',
template: `
<strong>3つのhttpリクエストをチェインして実行</strong><br />
<button (click)="chain()">実行</button><br />
<ul>
<li *ngFor="let item of results1">
<span>{{item}}</span>
</li>
</ul>
<strong>3つのhttpリクエストをパラレルに実行</strong><br />
<button (click)="para()">実行</button><br />
<ul>
<li *ngFor="let item of results2">
<span>{{item}}</span>
</li>
</ul>
<strong>httpリクエストをループ処理</strong><br />
<button (click)="loop()">実行</button><br />
<ul>
<li *ngFor="let item of results3">
<span>{{item|json}}</span>
</li>
</ul>
`
})
export class AppComponent {
constructor (private _http: Http) {}
public results1 = [];
public results2 = [];
public results3 = [];
private _results1 = [];
private _results3 = [];
private _https = [];
chain() {
this._http.get("/wp/q_chain_server.php?first=5")
.do((res1) => {
this._results1.push(res1.text());
})
.flatMap(() => {
return this._http.get("/wp/q_chain_server.php?second=1")
.do((res2) => {
this._results1.push(res2.text());
})
})
.flatMap(() => {
return this._http.get("/wp/q_chain_server.php?third=3")
.map((res3) => {
this._results1.push(res3.text());
return this._results1;
})
})
.subscribe(res => this.results1 = res);
}
para() {
Observable.forkJoin(
this._http.get("/wp/q_chain_server.php?first=5")
.map((res) => res.text()),
this._http.get("/wp/q_chain_server.php?second=1")
.map((res) => res.text()),
this._http.get("/wp/q_chain_server.php?third=3")
.map((res) => res.text())
).subscribe(res => this.results2 = res );
}
loop() {
this._http.get("/wp/q_loop_server.php?init=1")
.map((res3) => {
var total = res3.json().length;
for(var i=0; i < total;i++) {
var url = "/wp/q_loop_server.php?" + res3.json()[i][0];
var http = this._http.get(url).map(res => res.json());
this._https.push(http);
};
return this._https;
})
.flatMap((https) => Observable.forkJoin(https))
.subscribe(res => this.results3 = res );
};
}
@NgModule({
imports: [
BrowserModule,
HttpModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);