asynchronous - not - ¿Cómo hacer una solicitud asincrónica JSONP simple en Angular 2?

jsonp injected script did not invoke callback

Question

Estoy tratando de convertir el siguiente código Angular 1 a Angular 2:

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

Debe ser una solicitud JSONP para omitir el problema de la política CORS.

Answer 1

En Angular 4.3 y JsonpModule posteriores, debe usar HttpClientModule porque JsonpModule está en desuso.

1. Importe HttpClientModule y HttpClientJsonpModule en su módulo.
2. Inyecte HttpClient en su servicio.
3. Pase la clave de devolución de llamada como segundo argumento para el 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'');
  }
}

Answer 2

Si este punto final es compatible con jsonp, puede usar lo siguiente. Debe encontrar el parámetro que se utilizará para proporcionar la devolución de llamada jsonp. En el siguiente código, lo llamo c .

Después de haber registrado JSONP_PROVIDERS al llamar a la función bootstrap :

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

bootstrap(AppComponent, [ JSONP_PROVIDERS ]);

Luego puede ejecutar su solicitud utilizando una instancia de la clase Jsonp que inyectó desde el constructor:

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

Vea esta pregunta para más detalles:

• Necesito hacer una solicitud http a una lista de suscripción de chimpancés de correo a través de una publicación de componente

Answer 3

En la última versión de Angular

1. Importe los módulos HttpClientModule y HttpClientJsonpModule en el archivo de definición del módulo de su aplicación

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

2. Inyecte el operador http y map rxjs en su servicio en su servicio:

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

3. Realice solicitudes JSONP de la siguiente manera:

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

En Angular versión 2 - versión 4.3

1. Importe el módulo JSONP en el archivo de definición del módulo de su aplicación:

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

2. Inyecte el servicio jsonp y asigne el operador rxjs en su servicio:

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

3. Realice solicitudes utilizando "JSONP_CALLBACK" como propiedad de devolución de llamada:

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