How to make a simple JSONP asynchronous request in Angular 2?
In the latest version of Angular
Import HttpClientModule and HttpClientJsonpModule modules in your app module's definition file
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http'; @NgModule({ declarations: [ //... List of components that you need. ], imports: [ HttpClientModule, HttpClientJsonpModule, //... ], providers: [ //... ], bootstrap: [AppComponent] })
Inject http and map rxjs operator into your service:
import {Injectable} from '@angular/core'; import {HttpClient} from '@angular/http'; import 'rxjs/add/operator/map'; @Injectable() export class MegaSuperService { constructor(private _http: HttpClient) {} }
Make JSONP requests in the following way:
// inside your service this._http.jsonp('/api/get', 'callback').map(data => { // Do stuff. });
In Angular version 2 - version 4.3
Import JSONP module in your app module's definition file:
import {JsonpModule} from '@angular/http'; @NgModule({ declarations: [ //... List of components that you need. ], imports: [ JsonpModule, //... ], providers: [ //... ], bootstrap: [AppComponent] })
Inject jsonp service and map rxjs operator into your service:
import {Injectable} from '@angular/core'; import {Jsonp} from '@angular/http'; import 'rxjs/add/operator/map'; @Injectable() export class MegaSuperService { constructor(private _jsonp: Jsonp) {} }
Make requests using "JSONP_CALLBACK" as a callback property:
// inside your service this._jsonp.get('/api/get?callback=JSONP_CALLBACK').map(data => { // Do stuff. });
In Angular 4.3 and up you should use HttpClientModule because the JsonpModule is deprecated.
- Import HttpClientModule and HttpClientJsonpModule into your module.
- Inject HttpClient into your service.
- Pass the callback key as the second argument for the
jsonp
method.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';// Import relevant http modulesimport { 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 classimport { 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'); }}
If this endpoint is jsonp-compliant, you can use the following. You need to find out the parameter to use to provide the jsonp callback. In the code below, I call it c
.
After having registered JSONP_PROVIDERS
when calling the bootstrap
function:
import {bootstrap} from 'angular2/platform/browser'import {JSONP_PROVIDERS} from 'angular2/http'import {AppComponent} from './app.component'bootstrap(AppComponent, [ JSONP_PROVIDERS ]);
You can then execute your request using an instance of the Jsonp
class you injected from constructor:
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) => { (...) }); }}
See this question for more details: