如何在Angular 2中创build一个简单的JSONPasynchronous请求？

我试图将下面的Angular 1代码转换成Angular 2：

$http.jsonp('https://accounts.google.com/logout'); 

它需要是一个JSONP请求来跳过CORS策略问题。

Answer 1

在所有这些突破性变化之后，Angular 2中的JSONP请求可以按照以下方式进行。

1. 在应用模块的定义文件中导入JSONP模块

    import {JsonpModule} from '@angular/http'; @NgModule({ declarations: [ //... List of components that you need. ], imports: [ JsonpModule, //... ], providers: [ //... ], bootstrap: [AppComponent] }) 

2. 将jsonp服务注入到您的服务中：

    import {Jsonp} from '@angular/http'; @Injectable() export class MegaSuperService { constructor(private _jsonp: Jsonp) {} } 

3. 使用“JSONP_CALLBACK”作为callback属性发出请求：

    // inside your service this._jsonp.get('/api/get?callback=JSONP_CALLBACK').map(data => { // Do stuff. }); 

4. 正如titusfx所build议的那样，为了映射你需要导入的函数工作，结果是一个Observable并且只有在订阅的时候才被默认定义。 您需要手动导入任何其他操作员，如：

    import 'rxjs/add/operator/map'; 

或更一般的

  import 'rxjs/add/operator/'; 

就我个人而言，我曾经有过这个导入testing。 但是现在我在Angular 2.0.2中删除了它，代码没有被破坏。 这就是为什么这个步骤最初被省略。 如果你在map方法未定义的时候出现错误，这肯定会有帮助。

Answer 2

如果此端点符合jsonp，则可以使用以下内容。 你需要找出用来提供jsonpcallback的参数。 在下面的代码中，我称之为c 。

在调用bootstrap函数时注册了JSONP_PROVIDERS之后：

 import {bootstrap} from 'angular2/platform/browser' import {JSONP_PROVIDERS} from 'angular2/http' import {AppComponent} from './app.component' bootstrap(AppComponent, [ JSONP_PROVIDERS ]); 

然后，您可以使用从构造函数注入的Jsonp类的实例执行请求：

 import {Component} from 'angular2/core'; import {Jsonp} from 'angular2/http'; @Component({ selector: 'my-app', template: ` <div> Result: {{result | json}} </div> ` }) export class AppComponent { constructor(jsonp:Jsonp) { var url = 'https://accounts.google.com/logout&c=JSONP_CALLBACK'; jsonp.request(url, { method: 'Get' }) .subscribe((res) => { (...) }); } } 

看到这个问题的更多细节：

• 我需要通过一个组件发送一个邮件黑猩猩订阅列表的http请求