Angular 2：JSONP请求给出EXCEPTION：响应状态：200 Ok for URL(Angular 2: JSONP request giving EXCEPTION: Response

Angular 2：JSONP请求给出EXCEPTION：响应状态：200 Ok for URL(Angular 2: JSONP request giving EXCEPTION: Response with status: 200 Ok for URL)

我正在尝试使用Angular 2进行JSONP调用并遵循本文中提到的所有内容： 如何在Angular 2中创建一个简单的JSONP异步请求？

这是我的service.ts ：

import { Injectable } from '@angular/core'; import { Http, Jsonp } from '@angular/http' import 'rxjs'; import { Observable } from 'rxjs/Observable'; @Injectable() export class DataLoadService { private quoteApiUrl: string; constructor(private http: Http, private jsonp: Jsonp) { this.quoteApiUrl = `http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=parseQuote&lang=en&callback=JSONP_CALLBACK`; } getQuotes(): Observable<any>{ return this.jsonp.get(this.quoteApiUrl) .map(function(res){ return res.json() || {}; }) .catch(function(error: any){ return Observable.throw(error); }); } }

这就是我从home.ts调用getQuotes（）方法的方法：

this.dataLoadService.getQuotes() .subscribe(data => { console.log(data); this.quotes.push(data); });

这是一个JSONP调用，我在API的末尾添加了： &callback=JSONP_CALLBACK 。

调用服务后，我会获得有效的JSON响应，如Chrome的开发人员工具>网络>响应标签中所示：

parseQuote({"quoteText":"A failure is a man who has blundered but is not capable of cashing in on the experience. ", "quoteAuthor":"Elbert Hubbard", "senderName":"", "senderLink":"", "quoteLink":"http://forismatic.com/en/d74d7833cb/"})

但我也得到以下错误：

未捕获的ReferenceError：未定义parseQuote EXCEPTION：响应状态：200 Ok for URL： http： //api.forismatic.com/api/1.0/ ？ method = getQuote＆format = jsonp＆jsonp = batchQuote＆lang = en＆budgetQuote = ng_jsonp .__ req0.finished

请指教。 我正在使用角度v2.2.1。

I am trying to make a JSONP call using Angular 2 and followed everything mentioned in this post: How to make a simple JSONP asynchronous request in Angular 2?

Here is my service.ts:

import { Injectable } from '@angular/core'; import { Http, Jsonp } from '@angular/http' import 'rxjs'; import { Observable } from 'rxjs/Observable'; @Injectable() export class DataLoadService { private quoteApiUrl: string; constructor(private http: Http, private jsonp: Jsonp) { this.quoteApiUrl = `http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=parseQuote&lang=en&callback=JSONP_CALLBACK`; } getQuotes(): Observable<any>{ return this.jsonp.get(this.quoteApiUrl) .map(function(res){ return res.json() || {}; }) .catch(function(error: any){ return Observable.throw(error); }); } }

And this is how I am calling my getQuotes() method from my home.ts:

this.dataLoadService.getQuotes() .subscribe(data => { console.log(data); this.quotes.push(data); });

This being a JSONP call, I have added: &callback=JSONP_CALLBACK at the end of my API.

When the service is invoked, I do get valid JSON response as in Chrome's Developer Tools > Network > Response tab:

parseQuote({"quoteText":"A failure is a man who has blundered but is not capable of cashing in on the experience. ", "quoteAuthor":"Elbert Hubbard", "senderName":"", "senderLink":"", "quoteLink":"http://forismatic.com/en/d74d7833cb/"})

But I also get the following errors:

Uncaught ReferenceError: parseQuote is not defined EXCEPTION: Response with status: 200 Ok for URL: http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=parseQuote&lang=en&parseQuote=ng_jsonp.__req0.finished

Please advise. I am using angular v2.2.1.

最满意答案

您的代码没有任何问题，问题在于您提供的api端点网址。 显然它不会在callback参数中使用回调函数名，而是在jsonp参数中。

用这个替换你的网址它应该可以正常工作： http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=JSONP_CALLBACK&lang=en ： http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=JSONP_CALLBACK&lang=en

There is nothing wrong with your code, the issue is with the api endpoint url that you are providing. Apparently it does not take the callback function name in the callback parameter but in jsonp parameter.

Replace your url with this one and it should work fine: http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=JSONP_CALLBACK&lang=en