使用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

回答

相關問題