web-dev-qa-db-fra.com

Comment faire une simple requête asynchrone JSONP dans Angular 2?

J'essaie de convertir le code Angular 1 suivant en Angular 2:

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

Il doit s'agir d'une demande JSONP pour ignorer le problème de stratégie CORS.

asynchronoustypescriptxmlhttprequestangularjsonp
33
nunoarruda

Dans angulaire 4.3 et plus, vous devez utiliser HttpClientModule car le JsonpModule est obsolète.

  1. Importez HttpClientModule et HttpClientJsonpModule dans votre module.
  2. Injectez HttpClient dans votre service.
  3. Passez la clé de rappel comme deuxième argument de 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');
  }
}
22
Courtney Pattison

Dans la dernière version de Angular

  1. Importer les modules HttpClientModule et HttpClientJsonpModule dans le fichier de définition du module de votre application

    import {
    HttpClientModule,
    HttpClientJsonpModule
} from '@angular/common/http';

@NgModule({
declarations: [
    //... List of components that you need.
],
imports: [
    HttpClientModule,
    HttpClientJsonpModule,
    //...
],
providers: [
    //...
],
bootstrap: [AppComponent]
})

  2. Injectez les opérateurs http et rxjs dans votre service dans votre service:

    import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class MegaSuperService {
   constructor(private _http: HttpClient) {}
}

  3. Effectuez les requêtes JSONP de la manière suivante:

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

Dans Angular version 2 - version 4.

  1. Importez le module JSONP dans le fichier de définition de votre module d'application:

    import {JsonpModule} from '@angular/http';

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

  2. Injectez le service jsonp et mappez l'opérateur rxjs dans votre service:

    import {Injectable} from '@angular/core';
import {Jsonp} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class MegaSuperService {
   constructor(private _jsonp: Jsonp) {}
}

  3. Faites des demandes en utilisant "JSONP_CALLBACK" comme propriété de rappel:

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

Si ce terminal est compatible JSONP, vous pouvez utiliser les éléments suivants. Vous devez connaître le paramètre à utiliser pour fournir le rappel jsonp. Dans le code ci-dessous, je l'appelle c.

Après avoir enregistré JSONP_PROVIDERS lorsque vous appelez 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 ensuite exécuter votre demande 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:

11
Thierry Templier