Comment faire une simple requête asynchrone JSONP en angle 2?
j'essaie de convertir le code angulaire 1 suivant EN Code angulaire 2:
$http.jsonp('https://accounts.google.com/logout');
il doit s'agir d'une demande de JSONP pour sauter la question de la politique du CORS.
3 réponses
Dans Angulaire 4.3 et vous devez utiliser HttpClientModule parce que le JsonpModule est obsolète.
- Import HttpClientModule et HttpClientJsonpModule dans votre module.
- injecter HttpClient à votre service.
- passer la clé de rappel que le deuxième argument pour la méthode
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');
}
}
après tous ces changements de rupture, les requêtes JSONP en angle 2 peuvent être faites de la manière suivante.
-
importer le module JSONP dans le fichier de définition de votre module app
import {JsonpModule} from '@angular/http'; @NgModule({ declarations: [ //... List of components that you need. ], imports: [ JsonpModule, //... ], providers: [ //... ], bootstrap: [AppComponent] }) -
injecter le service jsonp à votre service:
import {Jsonp} from '@angular/http'; @Injectable() export class MegaSuperService { constructor(private _jsonp: Jsonp) {} } -
Faire des demandes à l'aide de "JSONP_CALLBACK" comme un rappel de la propriété:
// inside your service this._jsonp.get('/api/get?callback=JSONP_CALLBACK').map(data => { // Do stuff. }); -
comme titusfx suggéré, afin de cartographier le travail de fonction que vous devez importer, le résultat est un Observable et a seulement défini par défaut sauf subscribe . Vous devez importer manuellement tout autre opérateur comme:
import 'rxjs/add/operator/map';
ou plus général
import 'rxjs/add/operator/';
personnellement, j'avais cette importation en beta. Cependant, Je Je l'ai retiré en 2.0.2, et le code n'a pas été cassé. C'est pourquoi l'étape a été initialement omise. Si vous obtenez une erreur avec la méthode map non définie, cela devrait certainement aider.
si ce paramètre est compatible jsonp, vous pouvez utiliser ce qui suit. Vous devez trouver le paramètre à utiliser pour fournir le jsonp de rappel. Dans le code ci-dessous, je l'appelle c .
après avoir enregistré JSONP_PROVIDERS en appelant la fonction bootstrap :
import {bootstrap} from 'angular2/platform/browser'
import {JSONP_PROVIDERS} from 'angular2/http'
import {AppComponent} from './app.component'
bootstrap(AppComponent, [ JSONP_PROVIDERS ]);
vous pouvez alors exécuter votre requête en utilisant une instance de la classe Jsonp que vous avez injectée à partir du constructeur:
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) => {
(...)
});
}
}
voir cette question pour plus de détails: