"TypeError: __ng_jsonp__.__req0 is null" on second jsonp call

Question

我正在编写一个函数来调用 Forismatic 的 API 来生成随机报价：

getQuote() {

    var quote: any = { quote:"", person: "", link: "" };

    var url = "http://api.forismatic.com/api/1.0/";
    var headers = new Headers();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'application/json' );

    let params = {
      method: "getQuote",
      format: "jsonp",
      lang: "en",
      jsonp: "__ng_jsonp__.__req0.finished" 
    }

    let options = new RequestOptions({ 
      headers: headers,
      method: 'Get',
      params: params
    });

    this.jsonp.get(url, options)
      .map( res => res.json() ) 
      .subscribe(q => {
        console.log(q)
        quote.quote = q.quoteText
        quote.person = q.quoteAuthor;
        quote.link = q.quoteLink;
       }, 
       error => {
        console.log(error);// Error getting the data
      }
    );
    return quote;
  }

该功能在应用程序加载时起作用。 console.log(q) 打印如下对象，这是预期的结果：

Object { quoteText: "Criticism is something you can easily avoid by saying nothing, doing nothing, and being nothing.", quoteAuthor: "Aristotle", senderName: "", senderLink: "", quoteLink: "http://forismatic.com/en/9399c6b9a3/" }

但是，如果我第二次调用该函数（例如，通过复制函数调用的第二行或通过使用按钮调用它），我会收到以下错误：

Object { _body: "JSONP injected script did not invoke callback.", status: 200, ok: true, statusText: "Ok", headers: {…}, type: 3, url: "http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=__ng_jsonp__.__req0.finished" }

random-quote.ts:49:8
TypeError: __ng_jsonp__.__req0 is null[Learn More]

知道为什么会这样吗？我该如何解决？

非常感谢。

Answer 1

回调函数需要在每个 JSONP 请求上以不同的方式命名，即。每个回调只能使用一次。否则将无法知道哪个 http.json 调用导致回调函数被调用。

Angular 可能已将下一个回调命名为 __ng_jsonp__.__req1，因此您应该让 Angular 处理回调命名。

如果您的服务器正在寻找名为 jsonp 的参数中的回调名称，那么您只需将 params 中的 jsonp 值更改为 jsonp: 'JSONP_CALLBACK' 即可解决此问题。 Angular 将用正确的回调名称替换 JSONP_CALLBACK。默认情况下，它还会使用该值设置名为 callback 的参数。