asynchronous - funções - node js sincrono




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

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

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

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


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

  1. Importe HttpClientModule e HttpClientJsonpModule para o seu módulo.
  2. Injete o 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');
  }
}

Se esse nó de extremidade 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 .

Após registrar o JSONP_PROVIDERS ao chamar a função de JSONP_PROVIDERS - bootstrap :

import {bootstrap} from 'angular2/platform/browser'
import {JSONP_PROVIDERS} from 'angular2/http'
import {AppComponent} from './app.component'

bootstrap(AppComponent, [ JSONP_PROVIDERS ]);

Você pode executar sua solicitação usando uma instância da classe Jsonp injetada no construtor:

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

Veja esta pergunta para mais detalhes:





jsonp