Как сделать простой JSONP асинхронный запрос в Angular 2?

Question

Я пытаюсь преобразовать следующий код Angular 1 в Angular 2:

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

Это должен быть запрос JSONP, чтобы пропустить проблему политики CORS.

Answer 1

В Angular 4.3 и выше вы должны использовать HttpClientModule, потому что JsonpModule устарел.

1. Импортируйте HttpClientModule и HttpClientJsonpModule в ваш модуль.
2. Добавьте HttpClient в ваш сервис.
3. Передайте ключ обратного вызова в качестве второго аргумента для 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');
  }
}

Answer 2

После всех этих критических изменений запросы JSONP в Angular 2 могут быть выполнены следующим образом.

1. Импортируйте модуль JSONP в файл определения модуля вашего приложения

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

2. Добавьте сервис jsonp в ваш сервис:

   import {Jsonp} from '@angular/http';
   
   @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.
   });
   

4. Как предложил titusfx, для того, чтобы отобразить работу функции, вам необходимо импортировать, результат - Observable, который определен только по умолчанию, за исключением подписки. Вам нужно вручную импортировать любой другой оператор, например:

   import 'rxjs/add/operator/map';
   

или более общий

    import 'rxjs/add/operator/';

Лично я имел этот импорт в бета-версии. Однако я удалил его сейчас, в Angular 2.0.2, и код не сломался. Вот почему этот шаг был изначально опущен. Если вы получили ошибку с map метод не определен, это, безусловно, должно помочь.

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

Смотрите этот вопрос для более подробной информации:

• Мне нужно сделать HTTP-запрос к списку подписок шимпанзе почты через компонентный пост

Answer 4

С API автономного компонента Angular 15 используйтеwithJsonpSupport():

      bootstrapApplication(AppComponent, {
  providers: [provideHttpClient(withJsonpSupport())],
});