Question

我正在尝试使用Angular 2进行JSONP调用并遵循此帖中提到的所有内容：How to make a simple JSONP asynchronous request in Angular 2?

这是我的 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的开发者工具＆gt;网络＆gt;响应选项卡：

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=parseQuote&lang=en&parseQuote=ng_jsonp.__req0.finished

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

Answer 1

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

将此网址替换为此网址，它应该可以正常工作：http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=JSONP_CALLBACK&lang=en

Angular 2：JSONP请求给出EXCEPTION：响应状态：200 Ok for URL

1 个答案: