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.

27
demandé sur nunoarruda 2016-03-29 19:06:20

3 réponses

Dans Angulaire 4.3 et vous devez utiliser HttpClientModule parce que le JsonpModule est obsolète.

  1. Import HttpClientModule et HttpClientJsonpModule dans votre module.
  2. injecter HttpClient à votre service.
  3. 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');
  }
}
11
répondu Courtney Pattison 2018-03-29 21:37:19

après tous ces changements de rupture, les requêtes JSONP en angle 2 peuvent être faites de la manière suivante.

  1. 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]
    })
    
  2. injecter le service jsonp à votre service:

    import {Jsonp} from '@angular/http';
    
    @Injectable()
    export class MegaSuperService {
       constructor(private _jsonp: Jsonp) {}
    }
    
  3. 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.
    });
    
  4. 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.

64
répondu EternalLight 2016-10-19 12:33:58

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:

11
répondu Thierry Templier 2017-05-23 12:10:30