LoginSignup
11

More than 5 years have passed since last update.

[Angular2]複数httpリクエスト

Last updated at Posted at 2017-04-06

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')

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11