JSONP調用的Etsy

Question

我試圖通過服務來列出來自Etsy的型材產品，使用所提供的語法開發商頁面JSONP： https://www.etsy.com/developers/documentation/getting_started/jsonp

這是我的服務：

import { Injectable } from '@angular/core'; 
import { Jsonp } from '@angular/http'; 
import "rxjs/add/operator/first"; 

@Injectable() 
export class EtsyService { 

    constructor(
    private jsonp: Jsonp 
) { } 

    listProducts(){ 
    this.jsonp.get("https://openapi.etsy.com/v2/listings/513882265.js?callback=getData&api_key=YOURAPIKEY") 
     .first() 
     .subscribe(
     (data) => { 
      console.log(data); 
     }); 
    } 

} 

我得到兩個錯誤：

Uncaught ReferenceError: getData is not defined

和

ERROR Response {_body: "JSONP injected script did not invoke callback.", status: 200, ok: true, statusText: "Ok", headers: Headers…}

Answer 1

我自己找到了解決方案。您需要使用JSONP_CALLBACK作爲url語法中的默認回調。 這將是該服務的更正代碼：

import { Injectable } from '@angular/core'; 
import { Jsonp } from '@angular/http'; 
import "rxjs/add/operator/map"; 

@Injectable() 
export class EtsyService { 

    constructor(
    private jsonp: Jsonp 
) { } 

    listProducts(){ 
    this.jsonp.request("https://openapi.etsy.com/v2/listings/513882265.js?callback=JSONP_CALLBACK&api_key=YOURAPIKEY", { method: 'Get' }) 
     .map((data: any) => data.json()) 
     .subscribe(
     (data: any) => { 
      console.log(data); 
     } 
    ) 
    } 

}