如何在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和maprxjs操作符注入您的服务：

    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服务和maprxjs操作符注入您的服务：

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

Answer 2

在Angular 4.3及更高版本中，您应该使用HttpClientModule，因为JsonpModule已被弃用。

1. 将HttpClientModule和HttpClientJsonpModule导入到您的模块中
2. 将HttpClient注入到您的服务中
3. 将回调键作为jsonp方法的第二个参数传递

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// Import relevant http modules
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { ExampleService } from './example.service';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Import relevant http modules
    HttpClientModule,
    HttpClientJsonpModule
  ],
  providers: [ExampleService],
  bootstrap: [AppComponent]
})
export class AppModule { }

example.service.ts

import { Injectable } from '@angular/core';
// Import HttpClient class
import { HttpClient } from '@angular/common/http';
@Injectable()
export class ExampleService {
  // Inject HttpClient class
  constructor(private http: HttpClient) { }
  getData() {
    const url = "https://archive.org/index.php?output=json&callback=archive";
    // Pass the key for your callback (in this case 'callback')
    // as the second argument to the jsonp method
    return this.http.jsonp(url, 'callback');
  }
}

Answer 3

如果此端点符合jsonp，则可以使用以下内容。您需要找到用于提供jsonp回调的参数。在下面的代码中，我称之为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) => {
       (...)
     });
  }
}

有关更多详细信息，请参阅此问题：

• 我需要通过组件帖子对邮件chimp订阅列表进行http请求

Answer 4

使用Angular 15的独立组件API，使用withJsonpSupport():

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient(withJsonpSupport())],
});