Come creare una semplice richiesta asincrona JSONP in Angular 2?

Sto cercando di convertire il seguente codice angular 1 in Angular 2:

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

Deve essere una richiesta JSONP per saltare il problema con la politica CORS.

In Angular 4.3 e versioni successive è necessario utilizzare HttpClientModule perché JsonpModule è deprecato.

  1. Importa HttpClientModule e HttpClientJsonpModule nel tuo modulo.
  2. Inietta HttpClient nel tuo servizio.
  3. Passa il tasto callback come secondo argomento per il metodo 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'); } } 

Dopo tutte queste modifiche, le richieste JSONP in Angular 2 possono essere fatte nel modo seguente.

  1. Importa il modulo JSONP nel file di definizione del modulo dell’app

     import {JsonpModule} from '@angular/http'; @NgModule({ declarations: [ //... List of components that you need. ], imports: [ JsonpModule, //... ], providers: [ //... ], bootstrap: [AppComponent] }) 
  2. Inietti il ​​servizio jsonp al tuo servizio:

     import {Jsonp} from '@angular/http'; @Injectable() export class MegaSuperService { constructor(private _jsonp: Jsonp) {} } 
  3. Esegui richieste utilizzando “JSONP_CALLBACK” come proprietà callback:

     // inside your service this._jsonp.get('/api/get?callback=JSONP_CALLBACK').map(data => { // Do stuff. }); 
  4. Come suggerito da titusfx , per mappare il lavoro delle funzioni è necessario importare, il risultato è Osservabile e è stato definito solo per impostazione predefinita, ad eccezione di subscribe . È necessario importare manualmente qualsiasi altro operatore come:

     import 'rxjs/add/operator/map'; 

o più generale

  import 'rxjs/add/operator/'; 

Personalmente, avevo questa importazione in beta. Comunque l’ho rimosso ora, in Angular 2.0.2, e il codice non si è rotto. Ecco perché inizialmente il passaggio è stato omesso. Se si verifica un errore con il metodo della map non definito, ciò dovrebbe sicuramente aiutare.

Se questo endpoint è compatibile con jsonp, è ansible utilizzare quanto segue. È necessario trovare il parametro da utilizzare per fornire il callback jsonp. Nel codice qui sotto, lo chiamo c .

Dopo aver registrato JSONP_PROVIDERS quando si chiama la funzione bootstrap :

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

Puoi quindi eseguire la tua richiesta utilizzando un’istanza della class Jsonp hai iniettato dal costruttore:

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

Vedi questa domanda per maggiori dettagli:

  • Devo fare una richiesta http a una lista di abbonamenti mail chimp tramite un post componente