Como fazer uma solicitação assíncrona JSONP simples no Angular 2?

Estou tentando converter o seguinte código Angular 1 para Angular 2:

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

Ele precisa ser uma solicitação JSONP para ignorar o problema de política do CORS.

No Angular 4.3 e acima você deve usar o HttpClientModule porque o JsonpModule está obsoleto.

  1. Importe HttpClientModule e HttpClientJsonpModule no seu módulo.
  2. Injetar HttpClient em seu serviço.
  3. Passe a chave de retorno de chamada como o segundo argumento para o método 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'); } } 

Depois de todas essas alterações, as solicitações JSONP no Angular 2 podem ser feitas da seguinte maneira.

  1. Importe o módulo JSONP no arquivo de definição do seu módulo de aplicativo

     import {JsonpModule} from '@angular/http'; @NgModule({ declarations: [ //... List of components that you need. ], imports: [ JsonpModule, //... ], providers: [ //... ], bootstrap: [AppComponent] }) 
  2. Injetar serviço jsonp em seu serviço:

     import {Jsonp} from '@angular/http'; @Injectable() export class MegaSuperService { constructor(private _jsonp: Jsonp) {} } 
  3. Faça solicitações usando “JSONP_CALLBACK” como uma propriedade de retorno de chamada:

     // inside your service this._jsonp.get('/api/get?callback=JSONP_CALLBACK').map(data => { // Do stuff. }); 
  4. Como titusfx sugeriu, para mapear o trabalho de function que você precisa importar, o resultado é um Observable e foi definido apenas por padrão, exceto o subscribe . Você precisa importar manualmente qualquer outro operador como:

     import 'rxjs/add/operator/map'; 

ou mais geral

  import 'rxjs/add/operator/'; 

Pessoalmente, eu costumava ter essa importação em beta. No entanto, eu removi agora, no Angular 2.0.2, e o código não quebrou. É por isso que o passo foi inicialmente omitido. Se você receber um erro com o método do map sendo indefinido, isso certamente ajudará.

Se esse terminal for compatível com jsonp, você poderá usar o seguinte. Você precisa descobrir o parâmetro a ser usado para fornecer o retorno de chamada jsonp. No código abaixo, eu chamo de c .

Depois de ter registrado JSONP_PROVIDERS ao chamar a function de bootstrap :

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

Você pode então executar sua solicitação usando uma instância da class Jsonp você injetou do construtor:

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

Veja esta pergunta para mais detalhes:

  • Eu preciso fazer um pedido de http para uma lista de assinaturas de chimpanzé de email através de uma postagem de componente