可观察到的返回错误，但请求数据返回正常答案

【问题标题】：observable returning error, but request data comes back fine可观察到的返回错误，但请求数据返回正常
【发布时间】：2016-10-14 04:42:22
【问题描述】：

我在响应式扩展 (rx) Observable 订阅运算符上遇到错误，但不知道原因。似乎我已经完成的教程中的相同代码工作正常，但由于某种原因，我在使用实际 API 时遇到错误。

getChannelVideos(channelId: string): Observable<any>{
  var url = `${this._baseUrl}/channels/${channelId}/videos`;

  return this._jsonp.get(url).map(response => response.json());
}

// url https://api.twitch.tv/kraken/channels/khaldor/videos

在我的组件中，我在 ngOnInit 中调用该服务函数。

ngOnInit(){
  this._twitchService.getChannelVideos('khaldor')
    .subscribe(response => console.log(response));
}

在网络选项卡中，我收到一个带有 JSON 对象的 200 响应

{"_total":2,
  "_links":{...}, 
  "videos": {...} 
}

在控制台中，我收到一个错误 videos:1 Uncaught SyntaxError: Unexpected token :，它引用了返回的 JSON 响应中的第一个分号。

我尝试在服务中删除.map，但在将.subscribe() 应用于组件中的Observable 对象时，我得到了同样的错误。

【问题讨论】：

标签： javascript angular rxjs

【解决方案1】：

我认为您的地址不符合 JSONP 标准。如果是这种情况，您需要将JSONP_CALLBACK 值提供给回调查询参数。类似的东西：

getChannelVideos(channelId: string): Observable<any>{
  var url = `${this._baseUrl}/channels/${channelId}/videos?callback=JSONP_CALLBACK`;

  return this._jsonp.get(url).map(response => response.json());
}

callback 是一个示例，取决于服务。

如果您的服务支持 CORS，您可以改用 Http 类：

constructor(private http:Http) {}

getChannelVideos(channelId: string): Observable<any>{
  var url = `${this._baseUrl}/channels/${channelId}/videos`;

  return this.http.get(url).map(response => response.json());
}

【讨论】：

如果它不符合 JSONP 标准，它会返回数据吗？当我使用 Http 服务时，它给了我在未启用 CORS 的情况下发出 CORS 请求时的典型错误。我切换到 JSONP（他们说它是合规的），然后在 Network 选项卡中从请求中取回数据。
如果服务是 JSONP 就可以了。问题是您没有指定回调名称，因此响应是简单的 JSON，但没有包含在函数调用中。类似的东西：callback([ { name: 'test' }, ... ]);。因为 JSONP 依赖于添加的动态脚本元素来执行请求，所以响应必须遵循这个...
这里有两个示例：stackoverflow.com/questions/36289495/… 和 stackoverflow.com/questions/35180562/…。
您需要找出使用哪个查询参数来提供回调名称...
谢谢，第一次使用 JSONP，这让我很困惑。现在我在文档中看到了它。