typescript - Hvordan lage en enkel JSONP asynkron forespørsel i Angular 2?

Jeg prøver å konvertere følgende Angular 1-kode til Angular 2:

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

Det må være en JSONP-forespørsel for å omgå problemet med CORS-policyen.

Svar #1

I den nyeste versjonen av Angular

  1. Importer HttpClientModule og HttpClientJsonpModule modulene i definisjonsfilen for appmodulen din

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

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

  2. Injiser http og map rxjs-operatoren inn i tjenesten din:

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

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

  3. Lag JSONP-forespørsler på følgende måte:

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

I Angular versjon 2 - versjon 4.3

  1. Importer JSONP-modulen i definisjonsfilen for app-modulen din:

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

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

  2. Injiser jsonp-tjeneste og map-rxjs-operatoren inn i tjenesten din:

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

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

  3. Lag forespørsler ved å bruke "JSONP_CALLBACK" som en tilbakeringings-egenskap:

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

Svar #2

I Angular 4.3 og nyere bør du bruke HttpClientModule fordi JsonpModule er foreldet.

  1. Importer HttpClientModule og HttpClientJsonpModule inn i modulen din.
  2. Injiser HttpClient i tjenesten din.
  3. Send tilbakekallingsnøkkelen som det andre argumentet for jsonp-metoden.
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');
  }
}

Svar #3

Hvis dette endepunktet er jsonp-kompatibelt, kan du bruke følgende. Du må finne ut hvilken parameter som skal brukes for å gi jsonp-callbacken. I koden nedenfor kaller jeg den c.

Etter å ha registrert JSONP_PROVIDERS når du kaller bootstrap-funksjonen:

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

bootstrap(AppComponent, [ JSONP_PROVIDERS ]);

Du kan deretter utføre forespørselen din ved å bruke en instans av Jsonp-klassen du injiserte fra konstruktøren:

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

Se dette spørsmålet for mer informasjon:

  • Jeg trenger å gjøre en HTTP-forespørsel til en Mailchimp-abonnementsliste via en komponentpost

Relaterte artikler