Anger2 앱의 Deezer API

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 200 OK 응답을하지만, 내 말은 오류를 얻을으로 여전히 작동하지 않습니다

1. 예외 : 상태 응답 : URL에 대한 200 OK : https://api.deezer.com/search/artist/?q=deftones&output=json
2. catch되지 않은 응답 {_body : 상태 ". JSONP 스크립트 콜백을 호출하지 않았다 주입": (200)를 확인 : 사실, 통계 usText : "확인"을, 헤더 : 헤더 ...}

원래 : 자신의 자바 스크립트 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 Course처럼 REST API를 서비스로 사용하고 싶습니다. 함수에서 파이어베이스의 db에 게시 된 것을 테스트하지는 않았지만 성능이 좋지는 않지만 작동 할 것입니다.

내가 바라 보는 뭔가가 있습니까?

Answer 1

JSONP를 반환 할 때 서버가 수행하는 작업은 기본적으로 JavaScript 코드가 포함 된 JSON을 반환합니다. 이 자바 스크립트는 대개 함수입니다. 이렇게하면 JavaScript 환경에서 이미 정의 된 함수가 JSON 데이터를 조작 할 수 있습니다.

일반적인 JSON 페이로드는 일반적으로 다음과 같이 보일 것이다 :

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

등가 JSONP 페이로드가 같은 것을 볼 것이다 :

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

서버는 JSON 데이터를 제공하면 요청하는 웹 사이트를 수있는 기능을 제공합니다 함수의 이름을 지정합니다. 코드에서 문제는 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 || {}; 
}