asynchronous - 如何在 Angular 2 中发出简单的 JSONP 异步请求？

Question

我正在尝试将以下 Angular 1 代码转换为 Angular 2:

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

需要是JSONP请求才能跳过CORS策略问题。

Answer 1

在最新版本的 Angular 中

1. 在应用模块的定义文件中导入 HttpClientModule 和 HttpClientJsonpModule 模块

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

2. 将 http 和 map rxjs 运算符注入(inject)您的服务:

    import {Injectable} from '@angular/core';
    import {HttpClient} from '@angular/http';
    import 'rxjs/add/operator/map';
   
    @Injectable()
    export class MegaSuperService {
       constructor(private _http: HttpClient) {}
    }
   

3. 通过以下方式发出 JSONP 请求:

    // inside your service
    this._http.jsonp('/api/get', 'callback').map(data => {
    // Do stuff.
    });
   

在 Angular 版本 2 - 版本 4.3 中

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

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

2. 将 jsonp 服务和 map rxjs 操作符注入(inject)您的服务:

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

3. 使用“JSONP_CALLBACK”作为回调属性发出请求:

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