使用Angular 2调用Twitch API

我正在尝试对Angular 2（2.1.0）中的第三方API执行我的第一个http调用，这不仅仅是跟随教程，而且我很困难。使用Angular 2调用Twitch API

我正在尝试为FreeCodeCamp挑战（本身非常痛苦）调用Twitch API。我已经从一个使用jQuery编写的工作示例中接受了API调用，所以我知道我正在尝试调用正确的位置，但似乎无法恢复数据。

我的服务有以下几点：

apiBaseUrl: string = 'https://wind-bow.hyperdev.space/twitch-api/streams/'; 
user: string = 'ESL_SC2'; 
query: string = '?callback=?'; 

constructor(public jsonp: Jsonp) { } 

refresh(): Observable<string> { 
    const apiCall: string = this.apiBaseUrl + this.user + this.query; 

    return this.jsonp.get(apiCall) 
     .map((res: Response) => res.json()) 
     .catch((err: any) => Observable.throw(err.json().err)); 
}

，我订阅了它的成分是这样的：

ngOnInit() { 
    this.twitchService.refresh().subscribe(
     val => this.val = val, 
     error => this.errorMessage = <any>error); 
}

但在我的控制台，我只是有错误

Uncaught SyntaxError: Unexpected token ===

当我点击错误时，我在开发工具的Sources选项卡中找到了这个：

/**/ typeof === 'function' && 
({"stream":{"_id":23623614656,"game":"StarCraft II","viewers":283,... 
(etc.)

所以看起来我从API获取数据，但我无法弄清楚它为什么没有正确进入我的组件。如果任何人都可以阐明这一点，我会非常感激。

来源

2016-11-10 lordchancellor

你只需要做一件事就可以完成这项工作。在您的查询字符串回调参数中定义JSONP_CALLBACK：

query: string = '?callback=JSONP_CALLBACK';

您非常接近！我发现了这个在这里 - How to make a simple JSONP asynchronous request in Angular 2?

这是一个plunker展示变化和结果：http://plnkr.co/edit/QgBEcxycferSx2bTujQ6?p=preview

来源

2016-11-11 00:09:10 silentsod

天啊，@silentsod，太感谢你了！我一直在争取这一段时间，我很高兴能够开展工作！ – lordchancellor

因为这解决了你的问题，你介意接受答案吗？ – silentsod

绝对 - 我很抱歉，在激动之中我开始忘记礼节。再次感谢你！ – lordchancellor

使用Angular 2调用Twitch API

回答

相关问题