Angular 2 JSONP 注入脚本没有调用回调错误

Question

我是运行本地主机上的应用程序：//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-error 在网络选项卡上，我从 API network-tab

获取对象

Answer 1

好的解决方案是使用 http 模块发出获取请求并向 header 提供获取请求。 Header 部分是失败的主要原因。

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());

Answer 2

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 回调进行硬编码（回复：JSONP_CALLBACK 问题）时，您需要考虑调用的次数，因为 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'
...
}

Answer 3

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);
        });

Angular 2 JSONP 注入脚本没有调用回调错误

Angular 2 JSONP injected script did not invoke callback error

javascript

jsonp

angular