web-dev-qa-db-ja.com

Angular 2？で簡単なJSONP非同期リクエストを作成する方法

私は次のAngular 1コードをAngular 2：

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

CORSポリシーの問題をスキップするにはJSONPリクエストである必要があります。

asynchronoustypescriptxmlhttprequestangularjsonp
33
nunoarruda

Angular 4.3以降では HttpClientModule を使用する必要があります。これは JsonpModule が廃止されているためです。

  1. HttpClientModule および HttpClientJsonpModule をモジュールにインポートします。
  2. サービスに HttpClient を挿入します。
  3. jsonpメソッドの2番目の引数としてコールバックキーを渡します。

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

Angularの最新バージョン

  1. インポートHttpClientModuleおよびHttpClientJsonpModuleアプリモジュールの定義ファイルのモジュール

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

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

  2. httpおよびmaprxjs演算子をサービスにサービスに挿入します。

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

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

  3. 以下の方法でJSONPリクエストを作成します。

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

In Angularバージョン2-バージョン4.

  1. アプリモジュールの定義ファイルにJSONPモジュールをインポートします。

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

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

  2. jsonpサービスとmaprxjs演算子をサービスに挿入します。

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

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

  3. 「JSONP_CALLBACK」をコールバックプロパティとして使用してリクエストを作成します。

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

このエンドポイントがjsonpに準拠している場合、次を使用できます。 jsonpコールバックを提供するために使用するパラメーターを見つける必要があります。以下のコードでは、cと呼びます。

登録後JSONP_PROVIDERSbootstrap関数を呼び出すとき：

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

bootstrap(AppComponent, [ JSONP_PROVIDERS ]);

その後、コンストラクタから注入したJsonpクラスのインスタンスを使用してリクエストを実行できます。

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

詳細については、この質問を参照してください。

11
Thierry Templier