Вызов API Twitch с Angular 2

Question

Я пытаюсь сделать свой первый HTTP-вызов стороннему API в Angular 2 (2.1.0), который не просто следует за учебником, и я довольно застрял.

Я пытаюсь вызвать API Twitch для вызова FreeCodeCamp (что само по себе очень болезненно). Я взял вызов API из рабочего примера, написанного в jQuery, поэтому я знаю, что я пытаюсь позвонить в нужное место, но я не могу вернуть данные обратно.

Моя служба имеет следующие:

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 ===

Когда я нажимаю на ошибку, я получаю это на вкладке «Источники» моих инструментов dev:

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

Итак, похоже, что я получаю данные обратно из API, но я не могу понять, почему он не подходит к моему компоненту должным образом. Если кто-нибудь может пролить свет на это, я бы очень признателен.

Answer 1

Есть только одна вещь, которую вам нужно сделать, чтобы заставить это работать. Определение 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