Edited at

[Angular2]複数httpリクエスト

More than 1 year has passed since last update.

Angular1ではPromiseを使っていましたが、

Angular2ではObservableを使用するようになったようです。

忘れそうなのでメモ・・・

import { Injectable } from '@angular/core';

import { Http } from '@angular/http'
import { Observable } from 'rxjs'

@Injectable()
export class HogeService {

constructor(private http: Http) { }
 // 並列に実行してすべて完了したら結果をlogを出力するサンプル
sample1() {
let urls = [
"http://itunes.apple.com/jp/rss/newapplications/limit=10/json",
"http://itunes.apple.com/jp/rss/newfreeapplications/limit=10/json",
"http://itunes.apple.com/jp/rss/topfreeapplications/limit=10/json",
];
var requests = [];
for (var url of urls) {
requests.push(this.http.get(url).map(result => result.json()))
}
Observable.forkJoin(requests).subscribe( res => { console.log(res) })
}
// 直列(順次)に実行して処理すべて完了したら結果をlogに出力するサンプル
sample2() {
let urls = [
"http://itunes.apple.com/jp/rss/newapplications/limit=10/json",
"http://itunes.apple.com/jp/rss/newfreeapplications/limit=10/json",
"http://itunes.apple.com/jp/rss/topfreeapplications/limit=10/json",
];
var results = [];
this.http.get(urls[0]).map(res => { results.push(res)})
.flatMap(res => this.http.get(urls[1])).map(res => { results.push(res)})
.flatMap(res => this.http.get(urls[2])).map(res => { results.push(res)})
.subscribe( res => { console.log(results) })
}

// sample2と同じだけど、ぱっとみきれい?
sample3() {
let urls = [
"http://itunes.apple.com/jp/rss/newapplications/limit=10/json",
"http://itunes.apple.com/jp/rss/newfreeapplications/limit=10/json",
"http://itunes.apple.com/jp/rss/topfreeapplications/limit=10/json",
];
var results = [];
this.http.get(urls[0])
.map(res => { results.push(res); return this.http.get(urls[1])})
.map(res => { results.push(res); return this.http.get(urls[2])})
.map(res => results.push(res))
.subscribe( res => { console.log(results) })
}

}

ちなみにtoPromise()でPromise化もできる。(import 'rxjs/add/operator/toPromise')

もっときれいな書き方あったら教えてください