Javascript 如何使用angular 2进行链式请求（各种数字）

更新找到解决方案

我想从instagram api获取所有页面（{tag name}/media/recent？access_token=access-token） 在它的响应中有“next_url”参数，使用该参数可以获得新页面。 我尝试了递归，但它在第13步杀死了浏览器； 组成部分：

import { Component, OnInit } from '@angular/core';
import {InstagramService} from './instagram.service';

import {Search} from '../search';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  posts: Post[];
  tag: String = 'blabla23';
  constructor(
    private instagramService: InstagramService
  ) {}

  ngOnInit() {
    this.getPosts();
    this.posts = [];
  }

  getPosts(nextUrl?: string): void {
    this.instagramService
        .getTagMedia(this.tag, nextUrl)
        .then((result: Search) => {
            this.posts = this.posts.concat(this.posts, result.getMedia());
            if (result.getNextUrl() != null) {
                this.getPosts(result.getNextUrl().toString());
            }
        });
  }

}

服务：

 import { Injectable } from '@angular/core';
 import { Jsonp, Response, Headers, RequestOptions} from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/toPromise';
 import 'rxjs/add/operator/delay';
 import { Search } from './search';

@Injectable()
export class InstagramService {
  private apiUrl = 'https://api.instagram.com/v1/'; 
  private token = 'blalba';

  constructor (private jsonp: Jsonp) {}

  public getTagMedia(tag: String, url: string|null): Promise<Search> {
    url = url || `${this.apiUrl}tags/${tag}/media/recent?access_token=${this.token}`;
    url = `${url}&callback=JSONP_CALLBACK`
    return this.jsonp.get(url)
                    .toPromise()
                    .then(response => { return new Search(response.json());}) 
  }
}

}

我知道Observable.flatMap（），但在本例中由于请求数量未知而未能使用它

如何获取所有api页面？ ps我对Angular 2和js都是新手。 pps对不起我的英语

我做错了（递归和承诺）。 工作解决方案（服务）：

@Injectable（）
导出类InstagramService{
私人apiUrl服务器https://api.instagram.com/v1/';
私有令牌='blabla'；
私人网页slimit=5；
构造函数（私有jsonp:jsonp）{}
公共getTagMedia（标记：string）：承诺{
让url=`${this.apiUrl}tags/${tag}/media/recent？access_token=${this.token}`；
url=`${url}&callback=JSONP_callback`；
返回此.getPosts（url，0）；
}
publicGetPosts（url:string，page:number）：承诺{
返回此.jsonp.get（url）
.延迟（200）
.toPromise（）
。然后（响应=>{
让search=newsearch（response.json（））；
让nextur=search.getnextur（）；
if（nextur&&pagesearch.getMedia（）.concat（res））
}否则{
返回search.getMedia（）；
}
})
.接住（这个.把手错误）；
}
私有句柄错误（错误：响应|任意）{
console.log（错误）；
}
}

我做错了（递归和承诺）。 工作解决方案（服务）：

@Injectable（）
导出类InstagramService{
私人apiUrl服务器https://api.instagram.com/v1/';
私有令牌='blabla'；
私人网页slimit=5；
构造函数（私有jsonp:jsonp）{}
公共getTagMedia（标记：string）：承诺{
让url=`${this.apiUrl}tags/${tag}/media/recent？access_token=${this.token}`；
url=`${url}&callback=JSONP_callback`；
返回此.getPosts（url，0）；
}
publicGetPosts（url:string，page:number）：承诺{
返回此.jsonp.get（url）
.延迟（200）
.toPromise（）
。然后（响应=>{
让search=newsearch（response.json（））；
让nextur=search.getnextur（）；
if（nextur&&pagesearch.getMedia（）.concat（res））
}否则{
返回search.getMedia（）；
}
})
.接住（这个.把手错误）；
}
私有句柄错误（错误：响应|任意）{
console.log（错误）；
}
}

export class Search {
  private data;
  private metadata;
  private pagination;

  constructor(row) {
    this.data = row.data;
    this.metadata = row.metadata;
    this.pagination = row.pagination;
  }

  public getNextUrl(): string | null {
    return this.pagination.next_url || null;
  }

  public getMedia()  {
    return this.data;
  }

@Injectable()
export class InstagramService {
  private apiUrl = 'https://api.instagram.com/v1/';
  private token = 'blabla';
  private pagesLimit = 5;

  constructor (private jsonp: Jsonp) {}

  public getTagMedia(tag: string): Promise<Post[]> {
    let url = `${this.apiUrl}tags/${tag}/media/recent?access_token=${this.token}`;
    url = `${url}&callback=JSONP_CALLBACK`;

    return this.getPosts(url, 0);
  }

  public getPosts(url: string, page: number): Promise<Post[]> {

    return this.jsonp.get(url)
        .delay(200)
        .toPromise()
        .then(response => {
            let search = new Search(response.json());
            let nextUrl = search.getNextUrl();

            if (nextUrl && page < this.pagesLimit) {
                nextUrl = `${nextUrl}&callback=JSONP_CALLBACK`;
                return this.getPosts(nextUrl, ++page)
                            .then(res => search.getMedia().concat(res))
            } else {
                return search.getMedia();
            }
        })
        .catch(this.handleError);
  }

  private handleError (error: Response | any) {
    console.log(error);
  }
}