Как сделать простой асинхронный запрос JSONP в Angular 2?
Я пытаюсь преобразовать следующий Angular 1 код в Angular 2:
$http.jsonp('https://accounts.google.com/logout');
Это должен быть запрос JSONP, чтобы пропустить проблему политики CORS.
Ответы
Ответ 1
В Angular 4.3 и выше вы должны использовать HttpClientModule, потому что JsonpModule устарел.
- Импортируйте HttpClientModule и HttpClientJsonpModule в ваш модуль.
- Добавьте HttpClient в ваш сервис.
- Передайте ключ обратного вызова в качестве второго аргумента для метода
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');
}
}
Ответ 2
В последней версии Angular
-
Импортируйте модули HttpClientModule и HttpClientJsonpModule в файл определения модуля приложения
import {
HttpClientModule,
HttpClientJsonpModule
} from '@angular/common/http';
@NgModule({
declarations: [
//... List of components that you need.
],
imports: [
HttpClientModule,
HttpClientJsonpModule,
//...
],
providers: [
//...
],
bootstrap: [AppComponent]
})
-
Добавьте в ваш сервис http и map rxjs operator к вашему сервису:
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class MegaSuperService {
constructor(private _http: HttpClient) {}
}
-
Сделайте JSONP-запросы следующим образом:
// inside your service
this._http.jsonp('/api/get', 'callback').map(data => {
// Do stuff.
});
В угловой версии 2 - версия 4.3
-
Импортируйте модуль JSONP в файл определения модуля приложения:
import {JsonpModule} from '@angular/http';
@NgModule({
declarations: [
//... List of components that you need.
],
imports: [
JsonpModule,
//...
],
providers: [
//...
],
bootstrap: [AppComponent]
})
-
Добавьте сервис jsonp и сопоставьте оператора rxjs с вашим сервисом:
import {Injectable} from '@angular/core';
import {Jsonp} from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class MegaSuperService {
constructor(private _jsonp: Jsonp) {}
}
-
Сделайте запросы, используя "JSONP_CALLBACK" в качестве свойства обратного вызова:
// inside your service
this._jsonp.get('/api/get?callback=JSONP_CALLBACK').map(data => {
// Do stuff.
});
Ответ 3
Если эта конечная точка соответствует jsonp-совместимому, вы можете использовать следующее. Вам нужно узнать параметр, который будет использоваться для обеспечения обратного вызова jsonp. В приведенном ниже коде я называю его c
.
После регистрации JSONP_PROVIDERS
при вызове функции bootstrap
:
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) => {
(...)
});
}
}
См. этот вопрос для получения дополнительной информации: