Typescript 如何获取所有在angular2中可见的youtube视频

我的问题是，我将从youtube频道获取所有视频，即68个视频，但youtube只允许每个请求50个视频。我知道pageToken，但我先得到最老的视频

现在我的想法是，我将获取所有nextPageTokens，然后从频道中获取所有带有此nextPageTokens的视频，并在获取后对其进行排序

import {Injectable, Inject} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/scan';
import {Observable} from 'rxjs/Rx';

@Injectable()
export class YoutubeService {

videoArray:Array<any> = [];

constructor(@Inject(Http) private _http:Http) {

}

private extractData(res) {
let body = res.json();
return body || null;
}

private handleError(error:any) {
let errMsg = (error.message) ? error.message :
  error.status ? `${error.status} - ${error.statusText}` : 'Server    
error';
console.error(errMsg);
return Observable.throw(errMsg);
}


private fetchToken(token = '') {

return new Observable(observer => {

  let apiUrl = 'https://www.googleapis.com/youtube/v3/';
  let part = 'playlistItems?part=snippet';
  let playlistId = '&playlistId=PLBC4D1CE42B269BE5';
  let maxResults = '&maxResults=5';
  let nextPageToken = '&pageToken=' + token;
  let apiKey = '&key={APIKEY}';

  console.log(apiUrl + part + playlistId + maxResults + nextPageToken + apiKey);

  this._http.get(apiUrl + part + playlistId + maxResults + nextPageToken + apiKey)
    .map(this.extractData).subscribe(
    data => {
      this.videoArray.push(data.items);
      console.log(data.nextPageToken);
      if(data.nextPageToken !== undefined){
        this.fetchToken(data.nextPageToken).subscribe();
        observer.next(this.videoArray);
      } else {

      }
    });
})
}

public searchYouTube() {

this.fetchToken().subscribe(
  data => {
    console.log(data)
  }
)}}

从'@angular/core'导入{Injectable，injection}；
从'@angular/Http'导入{Http}；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/scan”；
从'rxjs/Rx'导入{Observable}；
@可注射（）
导出类YouTube服务{
videoArray:Array=[]；
构造函数（@Inject（Http）private\u Http:Http）{
}
私有数据（res）{
让body=res.json（）；
返回体| |空；
}
私有句柄错误（错误：任意）{
让errMsg=（error.message）？error.message：
error.status？`${error.status}-${error.statusText}`:'服务器
错误'；
控制台错误（errMsg）；
返回可观察抛出（errMsg）；
}
专用fetchToken（标记=“”）{
返回新的可观察对象（观察者=>{
让我们来看看https://www.googleapis.com/youtube/v3/';
let part='playlitems？part=snippet'；
让playlid='&playlid=PLBC4D1CE42B269BE5'；
设maxResults='&maxResults=5'；
让nextPageToken='&pageToken='+token；
设apiKey='&key={apiKey}'；
console.log（apirl+part+playlid+maxResults+nextPageToken+apiKey）；
这个._http.get（apirl+part+playlid+maxResults+nextPageToken+apiKey）
.map（此.extractData）。订阅(
数据=>{
这个.videoArray.push（data.items）；
console.log（data.nextPageToken）；
if（data.nextPageToken！==未定义）{
this.fetchToken（data.nextPageToken.subscribe（）；
observer.next（this.videoArray）；
}否则{
}
});
})
}
公共搜索YouTube（）{
此.fetchToken（）.subscribe(
数据=>{
console.log（数据）
}
)}}

通过这个，我得到了一个包含5个视频的数组。有没有可能比这更容易、更清晰地获取数据

致意

您可以使用操作员捕获响应并将其反馈到源中：

function fetchToken(token) {
  if (typeof token = 'undefined')
    return Rx.Observable.empty();

  const baseUrl = 'https://www.googleapis.com/youtube/v3/';
  const playlistId = 'PLBC4D1CE42B269BE5';
  let url = `${baseUrl}/playlistItems?part=snippet&playlistId=${playlistId}&maxResults=5&pageToken=${token}&key=${API_KEY}`;

  return this._http.get(url).map(this.extractData);
}

//The initial request
fetchToken('')
   //Invokes subsequent results based on the result of this one
   //and feeds them back to this operator
   //1 indicates the number of active requests to allow (concurrency 1)
  .expand(data => fetchToken(data.nextPageToken), 1)
  //Extract the video items
  .pluck('items')
  //Update the playlist
  .subscribe(videos => this.videoArray.push(videos));

---

哪个部分不干净？我想“.map（this.extractData）.subscribe（…”）后面的部分，我的可观察数据在它拥有所有标记之前推出所有数据，这很奇怪。这正是我所搜索的，非常感谢！它工作得很好。