[英]Angular 2 JSONP injected script did not invoke callback error
I am running app on localhost://3000 with npm server 我正在使用npm服务器在localhost:// 3000上运行应用程序
Services file: 服务文件:
import {Injectable} from "@angular/core";
import {Jsonp} from "@angular/http";
import 'rxjs/add/operator/map';
@Injectable()
export class futScoreService{
constructor(private _jsonp:Jsonp){}
getCompetitions(){
let queryString ='?callback=JSONP_CALLBACK';
return this._jsonp.get('http://api.football-data.org/v1/competitions/' + queryString,{method: 'Get'})
.map((res) => res.json());
}
}
Component file: 组件文件:
ngOnInit(){
this._futScoreService.getCompetitions().subscribe(
(comp)=>{
console.log(comp);
},
(err)=>{
console.log(err);
}
);
}
And I'm getting this error in console console-error and on network tab I get object from API network-tab 我在控制台console-error和网络选项卡中遇到此错误,我从API 网络选项卡获取对象
Ok solution was making get request with http module and providing header with get request. 好的解决方案是通过http模块发出get请求,并为header提供get请求。 Header part was main reason why it was failing. 标头部分是失败的主要原因。
let headers = new Headers({'X-Mashape-Key':'Ns0SkjyRRomshq3PgEnGoz2Zkc71p1CYnWajsnphGctvrGt46W'});
headers.append( 'Accept', 'application/json');
return this._http.get("http://api.football-data.org/v1/competitions/",{
headers: headers
})
.map((res) => res.json());
Angular is replacing JSONP_CALLBACK with __ng_jsonp____req0_finished
but it should be __ng_jsonp__.__req0.finished
角与更换JSONP_CALLBACK __ng_jsonp____req0_finished
但它应该是__ng_jsonp__.__req0.finished
Inspect your Network response. 检查您的网络响应。 If you see __ng_jsonp____req0_finished({...json object...})
this is the problem. 如果看到__ng_jsonp____req0_finished({...json object...})
这就是问题所在。
Also, some services have different requirements for the callback query string parameter , which proves to be nasty because the error is exactly the same. 此外, 某些服务对回调查询字符串参数有不同的要求 ,这被证明是令人讨厌的,因为错误是完全相同的。 I was using &callback=__ng_jsonp__.__req0.finished
with MailChimp which produced the same error but the response had only a json object and no callback function. 我在&callback=__ng_jsonp__.__req0.finished
中使用了&callback=__ng_jsonp__.__req0.finished
,它产生了相同的错误,但响应仅包含一个json对象,没有回调函数。 This is because MailChimp's spec is to use &c=
instead of &callback=
这是因为MailChimp的规范是使用&c=
而不是&callback=
When hardcoding the Jsonp callback (re: JSONP_CALLBACK issue) you need to account for the number of calls made, as Angular persists the state of each call. 在对Jsonp回调进行硬编码(re:JSONP_CALLBACK问题)时,您需要考虑所进行的调用次数,因为Angular会保留每个调用的状态。 An example of what I'm doing for Mailchimp: 我为Mailchimp做的一个例子:
addEmailToList(email: string, listId: string, jsonpCalls: number, callback: any) {
const cbJsonp = '__ng_jsonp__.__req' + jsonpCalls + '.finished';
let url = [
'http://',
host,
'/subscribe',
'/post-json',
].join('');
let queryParams: URLSearchParams = new URLSearchParams();
queryParams.set('u', Config.MAILCHIMP_API_KEY);
queryParams.set('id', listId);
queryParams.set('EMAIL', email);
queryParams.set('c', cbJsonp); // non-standard; varies by service; usually 'callback'
...
}
this._InstUrl = "your url";
let params1 = new URLSearchParams();
//params.set('search', term); // the user's search value
//params.set('action', 'opensearch');
params1.set('format', 'json');
//params1.set('callback', "ng_jsonp.__req0.finished");
params1.set('callback', "JSONP_CALLBACK");
return this._jsonp
.get(this._InstUrl, { search: params1 })
.map(response => { debugger; this.Result = response.json().data })
.subscribe(
(data) => {
debugger
console.log(this.Result);
},
(error) => {
debugger
console.log(error);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.