Angular 2 JSONP注入脚本没有调用回调错误
Angular 2 JSONP injected script did not invoke callback error
我正在运行应用程序在localhost://3000与npm服务器
服务文件:
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());
}
}
组件文件:
ngOnInit(){
this._futScoreService.getCompetitions().subscribe(
(comp)=>{
console.log(comp);
},
(err)=>{
console.log(err);
}
);
}
我在console console-error中得到这个错误在网络选项卡上,我从API网络选项卡中获取对象
Ok解决方案是使用http模块发出get请求并提供带有get请求的标头。标题部分是失败的主要原因。
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将JSONP_CALLBACK替换为__ng_jsonp____req0_finished
但它应该是__ng_jsonp__.__req0.finished
检查您的网络响应。如果你看到__ng_jsonp____req0_finished({...json object...})
,这就是问题所在。
此外,一些服务对回调查询字符串参数有不同的要求,这被证明是令人讨厌的,因为错误完全相同。我使用&callback=__ng_jsonp__.__req0.finished
与MailChimp产生相同的错误,但响应只有一个json对象,没有回调函数。这是因为MailChimp的规范是使用&c=
而不是&callback=
当硬编码Jsonp回调(re: JSONP_CALLBACK issue)时,你需要考虑调用的次数,因为Angular会持久化每个调用的状态。我为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);
});
相关文章:
- 为什么(如何)'这'从函数内部调用回调时发生更改
- 在初始函数完成之前调用回调函数
- Node.js exec调用从不调用回调
- 如何从参数数组中调用回调
- 如何在调用回调之前禁用按钮
- 加载文件,然后调用回调函数
- async.retry-已调用回调
- 节点.js“已调用回调”.但是没有任何其他回调
- JavaScript - 返回承诺和/或调用回调
- 解析查询.首次成功/错误 间歇性不调用回调
- 如何使用另一个 JavaScript 文件中定义的类名调用回调函数
- ReactJs:this.setState的情况下不调用回调函数
- $.post到PHP文件-在包含循环完成之前不会调用回调
- 异步加载ASP.NET绑定的Javascript,然后调用回调
- setTimeout()在其设置时间之前连续调用回调函数
- 在其他回调js中调用回调
- Ajax 调用重新加载页面,而不是调用回调函数
- Angularjs $http.get 不调用回调
- 未调用回调函数
- jQuery JSONP 不调用回调