각 2

Question

업데이트 찾을 솔루션 나는 인스 타 그램 API를 (https://api.instagram.com/v1/tags/ {태그 이름}/미디어/최근의 모든 페이지를 얻고 싶은

? access_token은 = 액세스 -와 체인 요청 (다양한 번호)를 만들려면 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());}) 
    } 
} 

검색 모델 :

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; 
    } 

} 내가 Observable.flatMap()에 대해 알고 있지만,이 경우에는 그것을 사용하는 데 실패

알 수없는 요청 수 때문입니다.

모든 API 페이지를 얻는 방법은 무엇입니까? ps Angular 2와 js는 처음입니다. pps 내 영어로 미안합니다

Answer 1

나는 (재귀 및 약속) 잘못했습니다. 작동 솔루션 (서비스) :

@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); 
    } 
}