Deezer API in Angular2 app

Question

DeezerのAPIにアクセスするアプリを構築しています。 JSONP使用のギュンターの先端を使用して

、私はこのようなDeezerのAPIを使用している場合：

@Injectable() 
export class DeezerService{ 

    constructor(private _jsonp:Jsonp){ 
    } 

    dzSearch(){ 
    console.log('Testing dzSearch() init'); 
    return this._jsonp.request('https://api.deezer.com/search/artist/?q=deftones&output=jsonp', {method:'Get'}) 
     .subscribe((res) => { 
     console.log(res); 
     }); 
    } 
} 

私はAPI OK 200応答を得るが、私は言ってエラーが出て、それはまだ動作しません。

1. EXCEPTION：ステータス応答：URLの200 OK： https://api.deezer.com/search/artist/?q=deftones&output=json
2. キャッチされないレスポンス{_body： "JSONPスクリプトを注入し コールバックを呼び出しませんでした。"、状況：200、[OK]：真、STAT usText： "OK"、ヘッダ： ヘッダ...}

オリジナル：自分のJavascript SDKを使用するには、私が使用して、それへのアクセスを獲得しました：

declare var DZ : any; 

@Injectable() 
export class DeezerService{ 

    constructor(private _http:Http){ 
    new DZ.init({ 
     appId : 'APPID', 
     channelUrl : 'http://localhost:4200/src/channel.html' 
    }); 
    } 

    dzSearch(){ 
    console.log('Testing dzSearch() init'); 
    DZ.api('/album/12720342/tracks', function(response){ 
     console.log(response.data); 
    }); 
    } 
} 

これは動作しますが、これではありませんどのように変数を渡すことができないので、私はそれを使いたいのですか？ Angular2のEduonixコースのように、REST APIをサービスとして使用したいと考えています。関数内のfirebaseのdbへの投稿をテストしていませんが、これもパフォーマンスには影響しませんが、うまくいくと思います。

私は見落としている何か他にありますか？

Answer 1

JSONPを返すようにサーバーに要求すると、JSONPは基本的にJavaScriptコードがラップされたJSONを返します。このJavaScriptは通常、関数です。このようにして、JavaScript環境で既に定義されている関数はJSONデータを操作できます。

典型的なJSONペイロードは、通常、次のようになります。

{“Id”: 565, “Name”: “Foo”, “LastName: “Bar”} 

同等JSONPペイロードは次のようなものになります：JSONデータを提供するサーバが要求するWebサイトに能力を提供しています

functionName({“Id”: 565, “Name”: “Foo”, “LastName: “Bar”}) 

を関数の名前を付けます。あなたのコードの問題は、サーバーにJSONPを返すように依頼することですが、関数にはその名前を付ける必要はありません。 Angular2 JsonpModuleで「JSONP_CALLBACK」という名前と呼ばれる必要がある機能を

({“Id”: 565, “Name”: “Foo”, “LastName: “Bar”}) 

：これは、サーバーがこのような何かを返すことを意味します。この名前をサーバーに渡す必要があります。

あなたAngular2コードは、次のようになります。

constructor(private jsonp: Jsonp) { } 

getTest(): Observable<any> { 
    return this.jsonp 
    .get('https://api.deezer.com/chart?output=jsonp&callback=JSONP_CALLBACK') 
    .map(this.extractData); 
} 

private extractData(res:Response) { 
    let body = res.json(); 
    return body.data || {}; 
}